码迷,mamicode.com
首页 > Web开发 > 详细

webpack性能优化-实战

时间:2018-05-14 19:48:22      阅读:273      评论:0      收藏:0      [点我收藏+]

标签:手动   团队   pac   ...   name   正文   clean   依赖   添加   

题外话:年初项目重构上线,项目技术栈使用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配置

webpack性能优化-实战

标签:手动   团队   pac   ...   name   正文   clean   依赖   添加   

原文地址:https://www.cnblogs.com/yuxina/p/9023179.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!