之前入職前，前任同事留了一份 vue CLI2 的代碼給我，不得不說修修補補最討厭了，所以上周升級了一下，也就是這篇文章的由來，使用的是 vue CLI3，未優化之前打包大小 24M，下面就分享一下我的優化之路。

升級版本

通常情況下，把版本升級到最新不僅可以提高編譯速度也可以避免一些出現過的問題( 慘遭打臉選用的 Ant Design of Vue 就重大更新了一次，又重新寫的 )。

按需加載

比如常見的 lodash 庫，我們顯然不需要全部都用到，所以要采用按需加載的方式來引用，對一些常見的方法進行提取統一進行處理，一般來說如果支持的話，文檔都會標注，如果沒有又不想要體積太大就自己寫一個，這方面不在過多闡述了。

webpack 方面

vue CLI3 對 webpack 的相關配置在vue.config.js文件內進行設置，分析了一下打包大小原因，對于一些圖片還可以進行壓縮減少體積，我采用的是image-webpack-loader，直接配置

chainWebpack: config => {config.module.rule("image-webpack-loader").test(/.(gif|png|jpe?g|svg)$/i).use("file-loader").loader("image-webpack-loader").tap(() => ({disable: process.env.NODE_ENV !== "production"})).end(); };

上述做完，體積還是在 18M 左右，下一步就是啟用gzip壓縮，具體內容可以去谷歌一下，這里只說如何實現，按照 vue CLI 文檔在 plugins 內添加compression-webpack-plugin，做完上述之后已經成功將體積縮小一半了。

CDN

推薦一下一個工具webpack-bundle-analyzer可視化分析打包大小。

從上面查看打包分析，發現主要集中在百度的富文本和@antv/data-set 這兩塊，占用了近 12M，不過在文檔方面沒看到@antv/data-set的按需加載，有發現的小伙伴可以在下面留言，決定把這兩部分放到公司內部的服務器上，采用 CND 的形式來進行加載。

這里推薦一下一篇文章CDN 是什么？使用 CDN 有什么優勢？ - 視界云的回答 - 知乎，如果符合上面就直接上手吧。

異步加載

es6 有一個 import()命令，在 webpack 中已經可以搶先體驗，對于直接加載和異步加載最主要的區別就在于體積的大小，比如 vue-router 中的路由，完全可以采用異步加載的形式，這樣可以大大縮小打包體積和首屏時間。

其他

剔除 console 和 debugger 代碼，這里我直接貼上我的配置了

minimizer: [new UglifyJsPlugin({uglifyOptions: {output: {// 刪除注釋comments: true,},chunkFilter: () => true,compress: {warnings: false,// 刪除consoledrop_console: true,ie8: false,// 刪除debuggerdrop_debugger: true,},},cache: true,parallel: true,})],

善用.browserslistrc，雖然默認配置已經很合理了，不過還可以針對受眾群體進一步優化，這里公司不支持 ie 所以直接把版本鎖定在了 ie > 11，可以減少一小部分的體積。

最后

因為 vue CLI 本身對這一方面優化的已經很成功了，所以其實并沒有太多值得優化的地方，更多應該是代碼本身。

優化結束后，文件只有 3M 左右。

總結

以上是生活随笔為你收集整理的vuecli3配置webpack_vue CLI3的优化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。