vue單頁面打包后app.js太大怎么辦

不是的，CommonsChunkPlugin 這個插件的作用是把你項目中用到的公用文件，比如vue、jQuery、util這些文件打包成一個vendor.js，這個文件不怎么變動，可以做cdn或者本地的緩存。
最終是這樣的：

<script src="/verdor.js"></script>
<!-- 以下為業(yè)務(wù)js -->
<script src="/2018/0106/a.js"></script>
<script src="/2018/0106/b.js"></script>

二樓對CommonChunkPlugin的用途理解是錯誤的。CommonChunkPlugin是可以是實現(xiàn)代碼分割解決app.js太大的問題。

在通過路由切換組件的單頁應(yīng)用中， 某些個別的路由的組件較大時，就可以采用配置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實現(xiàn)按需加載

最后我用路由懶加載解決了這個首屏慢的問題，可能webpack的 CommonsChunkPlugin 插件更適合在多頁面的時候，我項目本來就一個頁面分離了效果也不大

1，代碼分割 cCommonsChunkPlugin
2. 提取第三方庫 vendor
3. 外部引入第三方庫 external
4. 設(shè)置緩存
5. 代碼壓縮 uglifyJsPlugin

webpack 基本就這幾種解決方案。