webpack性能优化-实战

时间：2024-01-16 10:08:44

题外话：年初项目重构上线，项目技术栈使用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）dist/目录为静态资源输出目录，为了提高维护性，最终决定把config.js文件放在/config下。

解决方法：

使用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配置

相关文章