详解基于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 相关文章推荐
jQuery 常见学习网站与参考书
Nov 09 Javascript
JavaScript 学习笔记(六)
Dec 31 Javascript
jquery下jstree简单应用 - v1.0
Apr 14 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
May 25 Javascript
js Dialog 去掉右上角的X关闭功能
Apr 23 Javascript
node.js实现爬虫教程
Aug 25 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
Sep 24 Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
Jul 16 Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 Javascript
微信小程序实现搜索功能
Mar 10 Javascript
解决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水印
2007/03/16 PHP
php 正则 过滤html 的超链接
2009/06/02 PHP
php中explode与split的区别介绍
2012/10/03 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
在Mac OS上自行编译安装Apache服务器和PHP解释器
2015/12/24 PHP
PHP 中使用ajax时一些常见错误总结整理
2017/02/27 PHP
js资料toString 方法
2007/03/13 Javascript
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
2013/12/30 Javascript
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
2016/12/08 Javascript
vue时间格式化实例代码
2017/06/13 Javascript
Vue项目中引入外部文件的方法(css、js、less)
2017/07/24 Javascript
angularjs 获取默认选中的单选按钮的value方法
2018/02/28 Javascript
vue cli升级webapck4总结
2018/04/04 Javascript
小程序图片剪裁加旋转的示例代码
2018/07/10 Javascript
javascript中数组的常用算法深入分析
2019/03/12 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
Python进程间通信之共享内存详解
2017/10/30 Python
Python入门之三角函数atan2()函数详解
2017/11/08 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
Django处理多用户类型的方法介绍
2019/05/18 Python
python3中类的继承以及self和super的区别详解
2019/06/26 Python
Python图像处理库PIL的ImageEnhance模块使用介绍
2020/02/26 Python
波兰汽车配件网上商店:iParts.pl
2020/09/08 全球购物
一道SQL面试题
2012/12/31 面试题
社区国庆节活动方案
2014/02/05 职场文书
小学校长个人总结
2015/03/03 职场文书
小学音乐课教学反思
2016/02/18 职场文书
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis