详解基于vue-cli优化的webpack配置


Posted in Javascript onNovember 06, 2017

最近的项目度过了开始忙碌的基建期,也慢慢轻松下来,准备记录一下自己最近webpack优化的措施,希望有温故知新的效果。

项目采用的是vue全家桶,构建配置都是基于vue-cli去改进的。关于原始webpack配置大家可以看下这篇文章vue-cli#2.0 webpack配置分析,文章基本对于文件每行代码都做了详细的解释,有助于更好的理解webpack。

仔细总结了一下,自己的优化基本还是网上流传的那几点

  1. 通过 externals 配置来提取常用库,引用cdn
  2. 合理配置CommonsChunkPlugin
  3. 善用alias
  4. dllplugin启用预编译
  5. happypack多核构建项目

externals

文档地址 https://doc.webpack-china.org/configuration/externals/

防止将某些 import 的包(package)打包到 bundle 中,而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。

CommonsChunkPlugin

文档地址https://doc.webpack-china.org/plugins/commons-chunk-plugin/

CommonsChunkPlugin 插件,是一个可选的用于建立一个独立文件(又称作 chunk)的功能,这个文件包括多个入口 chunk 的公共模块。通过将公共模块拆出来,最终合成的文件能够在最开始的时候加载一次,便存起来到缓存中供后续使用。这个带来速度上的提升,因为浏览器会迅速将公共的代码从缓存中取出来,而不是每次访问一个新页面时,再去加载一个更大的文件。

resolve.alias

文档地址 https://doc.webpack-china.org/configuration/resolve/#resolve-alias

创建 import 或 require 的别名,来确保模块引入变得更简单。例如,一些位于 src/ 文件夹下的常用模块:

不过经过自己的实践最后三点是对自己项目优化最大的。文章也主要对后面几点详细说明一下

原来打包一个项目所需要的时间基本在40秒左右,那再经过后面三步优化大概要多久呢

1.使用dllplugin预编译与引用

首先为什么要引用Dll?在网上浏览了一些文章后,我发现上除了加快构建速度以外,使用webpack的dll还有一个好处。

Dll打包以后是独立存在的,只要其包含的库没有增减、升级,hash也不会变化,因此线上的dll代码不需要随着版本发布频繁更新。 因为使用Dll打包的基本上都是独立库文件,这类文件有一个特性就是变化不大。当我们正常打包这些库文件到一个app.js里的时候,由于其他业务文件的改变,影响了缓存对构建的优化,导致每次都要重新去npm包里寻找相关文件。而使用了DLL之后,只要包含的库没有升级, 增减,就不需要重新打包。这样也提高了构建速度。

那么如何使用Dll去优化项目呢

首先要建立一个dll的配置文件,引入项目所需要的第三方库。这类库的特点是不需要随着版本发布频繁更新,长期稳定。

const webpack = require('webpack');
const path = require('path');

module.exports = {
 entry: {
  //你需要引入的第三方库文件
  vendor: ['vue','vuex','vue-router','element-ui','axios','echarts/lib/echarts','echarts/lib/chart/bar','echarts/lib/chart/line','echarts/lib/chart/pie',
   'echarts/lib/component/tooltip','echarts/lib/component/title','echarts/lib/component/legend','echarts/lib/component/dataZoom','echarts/lib/component/toolbox'],
 },

 output: {
  path: path.join(__dirname, 'dist-[hash]'),
  filename: '[name].js',
  library: '[name]',
 },

 plugins: [
  new webpack.DllPlugin({
   path: path.join(__dirname, 'dll', '[name]-manifest.json'),
   filename: '[name].js',
   name: '[name]',
  }),
 ]
};

基本配置参数和webpack基本一模一样,相信来看优化的都明白什么意思,我就不解释了。然后执行代码编译文件。(我的配置文件是放在build里面,下方路径根据项目路径需要变动)

webpack -p --progress --config build/webpack.dll.config.js

当运行完执行后,会生成两个新文件在目录同级,一个是生成在dist文件夹下的verdor.js,里面是刚刚入口依赖被压缩后的代码;一个是dll文件夹下的verdor-manifest.json,将每个库进行了编号索引,并且使用的是id而不是name。

接下去你只要去你的webpack配置文件的里的plugin中添加一行代码就ok了。

const manifest = require('./dll/vendor-manifest.json');
...
...,
plugin:[
  new webpack.DllReferencePlugin({
    context: __dirname,
    manifest,
  }),
]

这时候再执行webpack命令,可以发现时间直接从40秒锐减到了20s左右,整整快了一倍有木有(不知道是不是因为自己依赖库太多了才这样的,手动捂脸)。

2.happypack多线程编译

一般node.js是单线程执行编译,而happypack则是启动node的多线程进行构建,大大提高了构建速度。使用方法也比较简单。以我项目为例,在插件中new一个新的happypack进程出来,然后再使用使用loader的地方替换成对应的id

var HappyPack = require('happypack');
...
...
modules:{
  rules : [
    ...
    {
      test: /\.js$/,
      loader:[ 'happypack/loader?id=happybabel'],
      include: [resolve('src')]
    },
    ...
  ]
},
...
...
plugin:[
  //happypack对对 url-loader,vue-loader 和 file-loader 支持度有限,会有报错,有坑。。。
  new HappyPack({
     id: 'happybabel',
     loaders: ['babel-loader'],
     threads: 4,//HappyPack 使用多少子进程来进行编译
  }),
  new HappyPack({
     id: 'scss',
     threads: 4,
     loaders: [
        'style-loader',
        'css-loader',
        'sass-loader',
     ],
  })
]

这时候再去执行编译webpack的代码,打印出来的console则变成了另外一种提示。而编译时间大概从20s优化到了15s左右(感觉好像没有网上说的那么大,不知道是不是因为本身js比重占据太大的缘故)。

3.善用alias

3.配合resolve,善用alias

本来是没有第三点的,只不过在搜索网上webpack优化相关文章的时候,看到用人提到把引入文件改成库提供的文件(原理我理解其实就是1.先通过resolve指定文件寻找位置,减小搜索范围;2.直接根据alias找到库提供的文件位置)。

vue-cli配置文件中提示也有提到这一点,就是下面这段代码

resolve: {
  //自动扩展文件后缀名,意味着我们require模块可以省略不写后缀名
  extensions: ['.js', '.vue', '.json'],
  //模块别名定义,方便后续直接引用别名,无须多写长长的地址
  alias: {
   'vue$': 'vue/dist/vue.esm.js',//就是这行代码,提供你直接引用文件
   '@': resolve('src'),
  }
 },

然后我将其他所有地方关于vue的引用都替换成了vue$之后,比如

// import 'vue';
import 'vue/dist/vue.esm.js';

时间竟然到了12s,也是把我吓了一跳。。。

然后我就把jquery,axios,vuex等等全部给替换掉了。。。大概优化到了9s左右,美滋滋,O(∩_∩)O~~

4.webpack3升级

本来是没第四点,刚刚看到公众号推出来一篇文章讲到升级到webpack3的一些新优点,比如Scope Hoisting(webpack2升级到webpack3基本上没有太大问题)。通过添加一个新的插件

// 2017-08-13配合最新升级的webpack3提供的新功能,可以使压缩的代码更小,运行更快
...
plugin : [
  new webpack.optimize.ModuleConcatenationPlugin(),
]

不过在添加这行代码之后,构建时间并没有太大变化,不过运行效率没试过,不知道新的效果怎么样

好了基本上感觉就是以上这些效果对项目的优化最大,虽然没有到网上说的那种只要3~4秒时间那么变态,不过感觉基本8,9秒的时间也可以了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用IE的地址栏来辅助调试Web页脚本
Mar 08 Javascript
jquery select动态加载选择(兼容各种浏览器)
Feb 01 Javascript
js实现收缩菜单效果实例代码
Oct 30 Javascript
javascript将url中的参数加密解密代码
Nov 17 Javascript
node.js中的path.isAbsolute方法使用说明
Dec 08 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
May 12 Javascript
Jquery中基本选择器用法实例详解
May 18 Javascript
js实现Select头像选择实时预览代码
Aug 17 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
Aug 09 Javascript
easyui tree带checkbox实现单选的简单实例
Nov 07 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
Jan 29 Javascript
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
解决option标签selected="selected"属性失效的问题
Nov 06 #Javascript
js中apply与call简单用法详解
Nov 06 #Javascript
js实现简单数字变动效果
Nov 06 #Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 #Javascript
原生js封装添加class,删除class的实例
Nov 06 #Javascript
Node.js实现发送邮件功能
Nov 06 #Javascript
快速搭建React的环境步骤详解
Nov 06 #Javascript
You might like
在PHP中利用XML技术构造远程服务(下)
2006/10/09 PHP
php 删除一个数组中的某个值.兼容多维数组!
2012/02/18 PHP
Laravel框架表单验证详解
2014/09/04 PHP
PHP中is_file()函数使用指南
2015/05/08 PHP
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
javascript模块化是什么及其优缺点介绍
2013/09/02 Javascript
今天是星期几的4种JS代码写法
2013/09/17 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
2014/01/14 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
Javascript ES6中数据类型Symbol的使用详解
2017/05/02 Javascript
详解react-router如何实现按需加载
2017/06/15 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
2019/07/16 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
[02:23]2016国际邀请赛中国区预选赛wings晋级之路
2016/06/29 DOTA
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
Python中的面向对象编程详解(上)
2015/04/13 Python
讲解Python中if语句的嵌套用法
2015/05/14 Python
python字符串编码识别模块chardet简单应用
2015/06/15 Python
详解python中递归函数
2019/04/16 Python
Django框架首页和登录页分离操作示例
2019/05/28 Python
python中count函数简单的实例讲解
2020/02/06 Python
Python *args和**kwargs用法实例解析
2020/03/02 Python
解决matplotlib.pyplot在Jupyter notebook中不显示图像问题
2020/04/22 Python
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
介绍一下except的用法和作用
2015/01/22 面试题
党旗在我心中演讲稿
2014/09/15 职场文书
党的群众路线剖析材料
2014/10/09 职场文书
工程承包协议书
2014/10/20 职场文书
义诊活动通知
2015/04/24 职场文书
Golang 字符串的常见操作
2022/04/19 Golang
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server