详解基于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 相关文章推荐
js用闭包遍历树状数组的方法
Mar 19 Javascript
js实现表单检测及表单提示的方法
Aug 14 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
jQuery EasyUi 验证功能实例解析
Jan 06 Javascript
微信小程序 密码输入(源码下载)
Jun 27 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
Feb 03 Javascript
Node.js引入UIBootstrap的方法示例
May 11 Javascript
vue项目打包后打开页面空白解决办法
Jun 29 Javascript
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 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缓存类完整实例
2014/07/26 PHP
老版本PHP转义Json里的特殊字符的函数
2015/06/08 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
js 动态修改css文件的方法
2014/08/05 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
js获取地址栏中传递的参数(两种方法)
2017/02/08 Javascript
详解vue slot插槽的使用方法
2017/06/13 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
2019/12/12 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
web.py中调用文件夹内模板的方法
2014/08/26 Python
跟老齐学Python之Python安装
2014/09/12 Python
在Python中利用Pandas库处理大数据的简单介绍
2015/04/07 Python
Python编程中实现迭代器的一些技巧小结
2016/06/21 Python
python的dataframe转换为多维矩阵的方法
2018/04/11 Python
Python设计模式之命令模式原理与用法实例分析
2019/01/11 Python
基于python和flask实现http接口过程解析
2020/06/15 Python
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
英国Amara家居法国网站:家居装饰,现代装饰和豪华礼品
2016/12/15 全球购物
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
美国最大的在线寄售和旧货店:Swap.com
2018/08/27 全球购物
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
服装厂厂长职责
2013/12/16 职场文书
代办委托书怎样写
2014/04/08 职场文书
毕业寄语大全
2014/04/09 职场文书
2014年入党积极分子党校培训心得体会
2014/07/08 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
新课程改革心得体会
2016/01/22 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书
python标准库ElementTree处理xml
2022/05/20 Python
详解Go语言中Get/Post请求测试
2022/06/01 Golang