webpack commonchunks vue-router，只显示1个chunk

Question

我当前的 webpack 构建是 7MB，显然它重新包含了它看到的每个导入。我正在尝试使用 commonchunks 插件来确保 node_modules 库只捆绑一次。但是它只看到 1 个块。

Asset       Size       Chunks                  Chunk Names
main.js     617 kB        0  [emitted]  [big]  main
vendor.js   6.98 MB       1  [emitted]  [big]  vendor



var path = require('path')
var webpack = require('webpack')

var assetsSrcDir = path.resolve(__dirname, './resources/assets');

module.exports = {
    entry: path.resolve(assetsSrcDir, 'app.js'),
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: function(module, count) {
                return ((module.context && module.context.indexOf("node_modules") > -1) || count >= 2);
            }
        })
    ],
    output: {
        path: path.resolve(__dirname, './public'),
        publicPath: '/',
        filename: '[name].js'
    },
    module: {
        rules: [{
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                loaders: {
                    'stylus': 'vue-style-loader!css-loader!stylus-loader',
                },
            }
        }, {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        }, {
            test: /\.(png|jpg|gif|svg)$/,
            loader: 'file-loader',
            options: {
                name: '[name].[ext]?[hash]'
            }
        }, {
            test: /\.styl$/,
            use: [
                'style-loader',
                'css-loader', {
                    loader: 'stylus-loader'
                },
            ]
        }, {
            test: /\.css$/,
            loader: 'style-loader!css-loader'
        }, {
            test: /\.(eot|svg|ttf|woff(2)?)(\?v=\d+\.\d+\.\d+)?/,
            loader: 'url-loader'
        }]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.common.js',
            http: path.resolve(assetsSrcDir, 'http.js'),
            routes: path.resolve(assetsSrcDir, 'routes.js'),
            filters: path.resolve(assetsSrcDir, 'filters.js'),
            eventBus: path.resolve(assetsSrcDir, 'eventBus.js'),
            styles: path.resolve(assetsSrcDir, 'assets/style'),
            images: path.resolve(assetsSrcDir, 'assets/images'),
            components: path.resolve(assetsSrcDir, 'components'),
            views: path.resolve(assetsSrcDir, 'views'),
            playback: path.resolve(assetsSrcDir, 'playback'),
        }
    },
    devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map'
        // http://vue-loader.vuejs.org/en/workflow/production.html
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: true,
            compress: {
                warnings: false
            }
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: true
        })
    ])
}

如果上下文有帮助，这是我的条目：https://github.com/alexcroox/R3-Web/blob/v1-refactor-data-optimisation/resources/assets/app.js

Answer 1

你需要做的是将你的路由组件定义为异步组件：

const Foo = resolve => {
// require.ensure is Webpack's special syntax for a code-split point.
 require.ensure(['./Foo.vue'], () => {
    resolve(require('./Foo.vue'))
 })
}

https://github.com/vuejs/vue-router/blob/dev/docs/en/advanced/lazy-loading.md