webpack性能优化-实战

Posted 2020-11-05 Hi娜娜

题外话：年初项目重构上线，项目技术栈使用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.js
var 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配置