webpack性能優化-實戰
阿新 • • 發佈：2018-05-14
之一 size als window span 公司 除了 tsp utils
題外話：年初項目重構上線，項目技術棧使用vue+webpack，測試執行整個打包流程需要10分鐘，同時又因涉及三個渠道，部署好環境就需半個小時，這嚴重延誤了上線進度，因此提高webpack構建效率，成為了改善團隊開發效率的關機之一。
正文：
一.抽離項目配置文件
因為項目前後端分離，需要配置接口地址，當時沒有考慮到分離配置文件，造成每次需要打包三次。
基本思路(百度)：把配置信息掛在window下，然後寫在一個不打包的js中，頁面單獨引入這個js
1.在dist/static/js/目錄下，新建config.js，內容為：
window.g = { serverUrl: ‘http://localhost:8088/‘ }
2.在*.html文件中引入該文件
<script type="text/javascript" src="/static/js/config.js"></script>
3.以上百度到的方法不是很適用公司項目。
原因：（1）公司項目為多頁應用，幾十個頁面，手動添加script標簽有些繁瑣，也不利於更改.
（2）每次打包前都會使用CleanWebpackPlugin插件來清空dist目錄，新建的config.js，被刪除了。
解決方法：
使用webpack插件add-asset-html-webpack-plugin，在html中註入script標簽
//在項目根目錄下/config/,新建config.jsvar AddAssetHtmlPlugin = require(‘add-asset-html-webpack-plugin‘); ...... plugins: [ new AddAssetHtmlPlugin([{ filepath: path.resolve(__dirname, ‘../config‘, ‘config.js‘),//文件本地地址 outputPath: utils.assetsPath(‘js‘),//文件輸出地址 publicPath: ‘/static/js/‘,//標簽中引用的地址 includeSourcemap: false}]) ]
本來要用這個插件註入DllPlugin第三方依賴庫的，但是因為實際操作中卻沒有提升打包效率，就用在分離配置文件了。
二.使用別名做重定向
三.優化loader配置
webpack性能優化-實戰