详解基于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 相关文章推荐
JqGrid web打印实现代码
May 31 Javascript
浅析document.createDocumentFragment()与js效率
Jul 08 Javascript
jquery 循环显示div的示例代码
Oct 18 Javascript
基于JavaScript获取鼠标位置的各种方法
Dec 16 Javascript
基于javascript制作微博发布栏效果
Apr 04 Javascript
JavaScript实现图片自动加载的瀑布流效果
Apr 11 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
Jun 13 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 Javascript
完美解决linux下node.js全局模块找不到的情况
May 16 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
Jun 18 Javascript
JavaScript数组排序的六种常见算法总结
Aug 18 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
推荐文章系统(一)
2006/10/09 PHP
PHP中__set()实例用法和基础讲解
2019/07/23 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
超级退弹代码
2008/07/07 Javascript
7个Javascript地图脚本整理
2009/10/20 Javascript
解决ueditor jquery javascript 取值问题
2014/12/30 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
JS中改变this指向的方法(call和apply、bind)
2016/03/26 Javascript
Angular 理解module和injector,即依赖注入
2016/09/07 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
详解Jquery Easyui的验证扩展
2017/01/09 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
2017/01/14 Javascript
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
使用express搭建一个简单的查询服务器的方法
2018/02/09 Javascript
js数据类型检测总结
2018/08/05 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
layui富文本编辑器前端无法取值的解决方法
2019/09/18 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
微信小程序反编译的实现
2020/12/10 Javascript
javascript实现数字时钟效果
2021/02/06 Javascript
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
Python过滤列表用法实例分析
2016/04/29 Python
Python从单元素字典中获取key和value的实例
2018/12/31 Python
python 发送json数据操作实例分析
2019/10/15 Python
俄罗斯优惠券网站:BIGLION
2017/05/21 全球购物
菲律宾旅游网站:Expedia菲律宾
2017/10/11 全球购物
新学期校长寄语
2014/01/18 职场文书
初中家长寄语
2014/04/02 职场文书
整改报告格式
2014/11/06 职场文书
大学生党员自我评价
2015/03/04 职场文书
AJAX实现省市县三级联动效果
2021/10/16 Javascript
SQL 聚合、分组和排序
2021/11/11 MySQL
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技