详解基于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 相关文章推荐
Opacity.js
Jan 22 Javascript
node.js使用nodemailer发送邮件实例
Mar 10 Javascript
javascript + jquery实现定时修改文章标题
Mar 19 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
JavaScript列表框listbox全选和反选的实现方法
Mar 18 Javascript
详解JavaScript的回调函数
Nov 20 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
vue.js全局API之nextTick全面解析
Jul 07 Javascript
vue中计算属性(computed)、methods和watched之间的区别
Jul 27 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
js实现烟花特效
Mar 02 Javascript
PHP读取远程txt文档到数组并实现遍历
Aug 25 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 错误之引号中使用变量
2009/05/04 PHP
一步一步学习PHP(3) php 函数
2010/02/15 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
2013/04/25 Javascript
JavaScript 数组详解
2013/10/10 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
jquery ajax 局部刷新小案例
2014/02/08 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
微信小程序开发一键登录 获取session_key和openid实例
2016/11/23 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
vue2.0父子组件及非父子组件之间的通信方法
2017/01/21 Javascript
ajax分页效果(bootstrap模态框)
2017/01/23 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
2017/06/20 Javascript
JS脚本加载后执行相应回调函数的操作方法
2018/02/28 Javascript
Vue press 支持图片放大功能的实例代码
2018/11/09 Javascript
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
python通过urllib2爬网页上种子下载示例
2014/02/24 Python
在Python程序中操作MySQL的基本方法
2015/07/29 Python
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
Python基于csv模块实现读取与写入csv数据的方法
2018/01/18 Python
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
提升python处理速度原理及方法实例
2019/12/25 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
Python rabbitMQ如何实现生产消费者模式
2020/08/24 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
几个Linux面试题笔试题
2016/08/01 面试题
高中毕业自我评价
2014/02/08 职场文书
2014最新毕业证代领委托书
2014/09/26 职场文书
党支部四风整改方案
2014/10/25 职场文书
地方白酒代理协议书
2014/10/25 职场文书
Python安装使用Scrapy框架
2022/04/12 Python