注意:这里用的还是vue-cli2 搭建的脚手架
解决方法一:
观察脚手架中使用webpack.optimize.CommonsChunkPlugin 切分了几块 chunk,依次引入就行
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === 'testing'
? 'index.html'
: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency',
//修改:这里的common.js 是在 webpack.base.conf.js中做了代码切分所使用的名称
chunks:['manifest','vendor','common.js','app']
}),
为了说明清楚一些,贴上webpack.base.conf.js的代码
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
var webpack = require("webpack")
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
const createLintingRule = () => ({
……
})
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js',
performance:'./src/views/Performance/index.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'Production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
module: {
rules: [
……
]
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
},
plugins: [
// 这里使用了 CommonsChunkPlugin 将一些第三方库和公共模块 提取到 common.js中
new webpack.optimize.CommonsChunkPlugin('common.js'),
]
}
解决方法二:
直接去掉 /build/webpack.prod.conf.js中的所有HtmlWebpackPlugin 配置的chunks节点删掉,让webpack使用默认的配置来注入chunks,缺点也很明显,会把另一个入口的不必要的代码引进来。
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === 'testing'
? 'index.html'
: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),