New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Code splitting with import() - webpackchunkname doesn't work #609

Closed
raghur opened this Issue Aug 26, 2017 · 14 comments

Comments

Projects
None yet
2 participants
@raghur

raghur commented Aug 26, 2017

I'm trying to use this in a vue project and would like to move multiple components to a single chunk.
Using syntax like this (with typescript 2.4.2)

@Component({
    components: {
        "todo-item":  () =>import(/* webpackChunkName = "comps" */ "./todo-item.vue.html" )
    }
})

generates

 App4 = __decorate([
        vue_property_decorator_1.Component({
            components: {
                "todo-item": function () { return Promise.resolve().then(function () { return require(/* webpackChunkName = "comps" */ "./todo-item.vue.html"); }); }
            }
        })
    ], App4);

which webpack doesn't see as a valid chunkname (webpack seems to support this only if you use import statements in ES2015.

Here's my tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "target": "es5",
    "sourceMap": true,
    "skipDefaultLibCheck": true,
    "strict": true,
    "types": ["webpack-env"],
    "lib": ["es2015", "dom"],
    "removeComments": false
  },
  "exclude": [
      "bin",
      "node_modules"
  ]
}

Can you please advise on the right way to go about this? I'd prefer to use the import() call as it's succinct and makes the intention clearer but if it doesn't let me target multiple components in the same chunk, it seems a little premature.

Complete code example here: Complete example codebase here - https://github.com/raghur/vue-testdrive/tree/ts-import

@johnnyreilly

This comment has been minimized.

Show comment
Hide comment
@johnnyreilly

johnnyreilly Aug 26, 2017

Member

I don't know vue and so can't help there; you might want to take a look at an example of import code splitting in action: https://github.com/TypeStrong/ts-loader/tree/master/test/execution-tests/2.4.1_babel-importCodeSplitting

Member

johnnyreilly commented Aug 26, 2017

I don't know vue and so can't help there; you might want to take a look at an example of import code splitting in action: https://github.com/TypeStrong/ts-loader/tree/master/test/execution-tests/2.4.1_babel-importCodeSplitting

@johnnyreilly

This comment has been minimized.

Show comment
Hide comment
@johnnyreilly

This comment has been minimized.

Show comment
Hide comment
@johnnyreilly

johnnyreilly Aug 26, 2017

Member

I take it vue accepts Promises?

Member

johnnyreilly commented Aug 26, 2017

I take it vue accepts Promises?

@raghur

This comment has been minimized.

Show comment
Hide comment
@raghur

raghur Aug 26, 2017

Yes - the promise syntax works but it's verbose.

@Component({
    components: {
        "todo-item":  () =>Promise.resolve(require.ensure(["./todo-item.vue.html"], 
                                                            ()=> require("./todo-item.vue.html"), 
                                                            "comps"))    
        }
})

raghur commented Aug 26, 2017

Yes - the promise syntax works but it's verbose.

@Component({
    components: {
        "todo-item":  () =>Promise.resolve(require.ensure(["./todo-item.vue.html"], 
                                                            ()=> require("./todo-item.vue.html"), 
                                                            "comps"))    
        }
})
@raghur

This comment has been minimized.

Show comment
Hide comment
@raghur

raghur Aug 26, 2017

So I looked at https://github.com/TypeStrong/ts-loader/tree/master/test/execution-tests/2.4.1_babel-importCodeSplitting

and made similar changes to my project. Code splitting works -but specifying chunk name with /* webpackChunkName="foo"*/ does not work.

raghur commented Aug 26, 2017

So I looked at https://github.com/TypeStrong/ts-loader/tree/master/test/execution-tests/2.4.1_babel-importCodeSplitting

and made similar changes to my project. Code splitting works -but specifying chunk name with /* webpackChunkName="foo"*/ does not work.

@johnnyreilly

This comment has been minimized.

Show comment
Hide comment
@johnnyreilly

johnnyreilly Aug 30, 2017

Member

Are you definitely using webpack 3? Our tests still run against webpack 2.

Member

johnnyreilly commented Aug 30, 2017

Are you definitely using webpack 3? Our tests still run against webpack 2.

@raghur

This comment has been minimized.

Show comment
Hide comment
@raghur

raghur Aug 31, 2017

I'm using webpack 2.7.0. Note that there is no problem with using import for code splitting - just that without being able to specify chunk name, each and every split ends up in a different chunk which is of limited usefulness.

raghur commented Aug 31, 2017

I'm using webpack 2.7.0. Note that there is no problem with using import for code splitting - just that without being able to specify chunk name, each and every split ends up in a different chunk which is of limited usefulness.

@johnnyreilly

This comment has been minimized.

Show comment
Hide comment
@johnnyreilly

johnnyreilly Aug 31, 2017

Member

Yeah I think you need to be on webpack 3 to use specifying of chunk names

Member

johnnyreilly commented Aug 31, 2017

Yeah I think you need to be on webpack 3 to use specifying of chunk names

@raghur

This comment has been minimized.

Show comment
Hide comment
@raghur

raghur Aug 31, 2017

No - the comment syntax works with webpack > 2.4

raghur commented Aug 31, 2017

No - the comment syntax works with webpack > 2.4

@johnnyreilly

This comment has been minimized.

Show comment
Hide comment
@johnnyreilly

johnnyreilly Aug 31, 2017

Member

Then I'd look at the output js that ts-loader is passing to webpack. Find out what that looks like and see if there's any problem compatibility wise between what that is and what webpack expects

Member

johnnyreilly commented Aug 31, 2017

Then I'd look at the output js that ts-loader is passing to webpack. Find out what that looks like and see if there's any problem compatibility wise between what that is and what webpack expects

@raghur

This comment has been minimized.

Show comment
Hide comment
@raghur

raghur Aug 31, 2017

I included the generated output in the issue description - is that what you mean? The issue seems to be that import is transpiled to a require call which doesn't support the chunk name in comments.

Not sure if that is a ts-loader issue or a TS issue.

raghur commented Aug 31, 2017

I included the generated output in the issue description - is that what you mean? The issue seems to be that import is transpiled to a require call which doesn't support the chunk name in comments.

Not sure if that is a ts-loader issue or a TS issue.

@johnnyreilly

This comment has been minimized.

Show comment
Hide comment
@johnnyreilly

johnnyreilly Aug 31, 2017

Member

I'm going to guess you're going to need to change your compile target to es2015 from "target": "es5"?

Member

johnnyreilly commented Aug 31, 2017

I'm going to guess you're going to need to change your compile target to es2015 from "target": "es5"?

@raghur

This comment has been minimized.

Show comment
Hide comment
@raghur

raghur Aug 31, 2017

Ah - so after bringing in babel-loader and changing tsconfig.json to "target": "es2015", I've got this working.

Still new to webpack & typescript - thanks for the support

If anyone else needs the same thing, here's my webpack config

raghur commented Aug 31, 2017

Ah - so after bringing in babel-loader and changing tsconfig.json to "target": "es2015", I've got this working.

Still new to webpack & typescript - thanks for the support

If anyone else needs the same thing, here's my webpack config

@raghur raghur closed this Aug 31, 2017

@johnnyreilly

This comment has been minimized.

Show comment
Hide comment
@johnnyreilly

johnnyreilly Aug 31, 2017

Member

Thanks for sharing!

Member

johnnyreilly commented Aug 31, 2017

Thanks for sharing!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment