这样的需求不是很合理啊。具体参考楼上回答。
但非要实现也可以。
1、再怎么样,我也建议提取css建议。不然等待JS加载完,才显示样式。用户明显可以看出样式缺失,然后才有样式。
提取使用的插件是用的extract-text-webpack-plugin。
2、从vue-cli @2.9.x版本的build/webpack.prod.conf.js 来看,会提取公共的JS代码到mainfest.js,vendor.js,vendor-async.js。如果不需要就注释即可。
刚好之前写了篇分析vue-cli构建的文章,分析vue-cli@2.9.3 搭建的webpack项目工程,附上一些代码和注释可供参考。
// 提取公共代码
new webpack.optimize.CommonsChunkPlugin({
name: ‘vendor’,
minChunks (module) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, ‘../node_modules’)
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
// 提取公共代码
new webpack.optimize.CommonsChunkPlugin({
// 把公共的部分放到 manifest 中
name: ‘manifest’,
// 传入 `Infinity` 会马上生成 公共chunk,但里面没有模块。
minChunks: Infinity
}),
// This instance extracts shared chunks from code splitted chunks and bundles them
// in a separate chunk, similar to the vendor chunk
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
// 提取动态组件
new webpack.optimize.CommonsChunkPlugin({
name: ‘app’,
// 如果设置为 `true`,一个异步的 公共chunk 会作为 `options.name` 的子模块,和 `options.chunks` 的兄弟模块被创建。
// 它会与 `options.chunks` 并行被加载。可以通过提供想要的字符串,而不是 `true` 来对输出的文件进行更换名称。
async: ‘vendor-async’,
// 如果设置为 `true`,所有 公共chunk 的子模块都会被选择
children: true,
// 最小3个,包含3,chunk的时候提取
minChunks: 3
}),