laravel-mix配置vue的懶加載組件

larave-mix version: v4.1.2

安裝依賴

yarn add babel-plugin-syntax-dynamic-import --save-dev
yarn add  babel-plugin-dynamic-import-webpack --save-dev

.baberc

增長:

"plugins": [
        ["syntax-dynamic-import"]
    ]

webpack.config.js

注意
publicPath: public/dist
chunk js file path: public/dist/js/xxx.chunk.js
chunk js url in html : http:localhost/dist/js/xxxx.c...

mix.setPublicPath(path.join('public', 'dist'));
mix.config.webpackConfig.output = {
  chunkFilename: 'js/[name].chunk.js',
  publicPath: '/dist/',
};

引入組件改成:

//Vue.component('post-content-vue', require('../components/PostContent'));

PostContent = ()=>import(/* webpackChunkName: "post-content" */'../components/PostContent');
Vue.component('post-content-vue', PostContent);

Enjoy.