vue单页面打包后app.js太大怎么办

Question

使用webpack的 CommonsChunkPlugin 插件 是不是给多页面应用用的，单页面没有意义？

Answer 1

最后我用路由懒加载解决了这个首屏慢的问题，可能webpack的 CommonsChunkPlugin 插件更适合在多页面的时候，我项目本来就一个页面分离了效果也不大

Answer 2

不是的，CommonsChunkPlugin 这个插件的作用是把你项目中用到的公用文件，比如vue、jQuery、util这些文件打包成一个vendor.js，这个文件不怎么变动，可以做cdn或者本地的缓存。
最终是这样的：

<script src="/verdor.js"></script>
<!-- 以下为业务js -->
<script src="/2018/0106/a.js"></script>
<script src="/2018/0106/b.js"></script>

Answer 3

1，代码分割 cCommonsChunkPlugin
2. 提取第三方库 vendor
3. 外部引入第三方库 external
4. 设置缓存
5. 代码压缩 uglifyJsPlugin

webpack 基本就这几种解决方案。

Answer 4

二楼对CommonChunkPlugin的用途理解是错误的。CommonChunkPlugin是可以是实现代码分割解决app.js太大的问题。

在通过路由切换组件的单页应用中， 某些个别的路由的组件较大时，就可以采用配置CommonChunkPlugin，并在router/index.js中使用require.ensure()进行组件的引入：

const ComA = resolve => require.ensure([], () => resolve(require('./components/A.vue')));
const ComB = resolve => require.ensure([], () => resolve(require('./components/B.vue')));
const ComC = resolve => require.ensure([], () => resolve(require('./components/C.vue')));

此时，上面的组件就被webpack单独打包成xxx.js。

详情可见这篇文章Webpack的Code Splitting实现按需加载