首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

webpack打包优化的几个方法总结

Posted in Javascript onFebruary 10, 2020

为什么要优化打包？

  • 项目越做越大，依赖包越来越多，打包文件太大
  • 单页面应用首页白屏时间长，用户体验差

我们的目的

  • 减小打包后的文件大小
  • 首页按需引入文件
  • 优化 webpack 打包时间

优化方式

1、 按需加载

1.1 路由组件按需加载

const router = [
 {
  path: '/index',
  component: resolve => require.ensure([], () => resolve(require('@/components/index')))
 },
 {
  path: '/about',
  component: resolve => require.ensure([], () => resolve(require('@/components/about')))
 }
]

1.2 第三方组件和插件。按需加载需引入第三方组件

// 引入全部组件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

// 按需引入组件
import { Button } from 'element-ui'
Vue.component(Button.name, Button)

1.3 对于一些插件，如果只是在个别组件中用的到，也可以不要在 main.js 里面引入，而是在组件中按需引入

// 在main.js引入
import Vue from vue
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

// 按组件按需引入
import { Vuelidate } from 'vuelidate'

2、优化 loader 配置

  • 优化正则匹配
  • 通过 cacheDirectory 选项开启缓存
  • 通过 include、exclude 来减少被处理的文件。
module: {
 rules: [
  {
   test: /\.js$/,
   loader: 'babel-loader?cacheDirectory',
   include: [resolve('src')]
  }
 ]
}

3、优化文件路径——省下搜索文件的时间

  • extension 配置之后可以不用在 require 或是 import 的时候加文件扩展名,会依次尝试添加扩展名进行匹配。
  • mainFiles 配置后不用加入文件名，会依次尝试添加的文件名进行匹配
  • alias 通过配置别名可以加快 webpack 查找模块的速度。
resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
   'vue$': 'vue/dist/vue.esm.js',
   '@': resolve('src'),
  }
 },

4、生产环境关闭 sourceMap

  • sourceMap 本质上是一种映射关系，打包出来的 js 文件中的代码可以映射到代码文件的具体位置,这种映射关系会帮助我们直接找到在源代码中的错误。
  • 打包速度减慢，生产文件变大，所以开发环境使用 sourceMap，生产环境则关闭。

5、代码压缩

  • UglifyJS: vue-cli 默认使用的压缩代码方式，它使用的是单线程压缩代码，打包时间较慢
  • ParallelUglifyPlugin: 开启多个子进程，把对多个文件压缩的工作分别给多个子进程去完成

两种方法使用如下：

plugins: [
 new UglifyJsPlugin({
  uglifyOptions: {
   compress: {
    warnings: false
   }
  },
  sourceMap: true,
  parallel: true
 }),

 new ParallelUglifyPlugin({
  //缓存压缩后的结果，下次遇到一样的输入时直接从缓存中获取压缩后的结果并返回，
  //cacheDir 用于配置缓存存放的目录路径。
  cacheDir: '.cache/',
  sourceMap: true,
  uglifyJS: {
   output: {
    comments: false
   },
   compress: {
    warnings: false
   }
  }
 })
]

6、提取公共代码

  • 相同资源重复被加载，浪费用户流量，增加服务器成本。
  • 每个页面需要加载的资源太大，导致网页首屏加载缓慢，影响用户体验。

webpack3 使用 CommonsChunkPlugin 的实现：

plugins: [
 new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  minChunks: function(module, count) {
   console.log(module.resource, `引用次数${count}`)
   //"有正在处理文件" + "这个文件是 .js 后缀" + "这个文件是在 node_modules 中"
   return module.resource && /\.js$/.test(module.resource) && module.resource.indexOf(path.join(__dirname, './node_modules')) === 0
  }
 }),
 new webpack.optimize.CommonsChunkPlugin({
  name: 'common',
  chunks: 'initial',
  minChunks: 2
 })
]

webpack4 使用 splitChunks 的实现：

module.exports = {
 optimization: {
  splitChunks: {
   cacheGroups: {
    vendor: {
     priority: 1, //添加权重
     test: /node_modules/, //把这个目录下符合下面几个条件的库抽离出来
     chunks: 'initial', //刚开始就要抽离
     minChunks: 2 //重复2次使用的时候需要抽离出来
    },
    common: {
     //公共的模块
     chunks: 'initial',
     minChunks: 2
    }
   }
  }
 }
}

7、CDN 优化

  1. 随着项目越做越大，依赖的第三方 npm 包越来越多，构建之后的文件也会越来越大。
  2. 再加上又是单页应用，这就会导致在网速较慢或者服务器带宽有限的情况出现长时间的白屏。

1、将 vue、vue-router、vuex、element-ui 和 axios 这五个库，全部改为通过 CDN 链接获取，在 index.html 里插入 相应链接。

<head>
 <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css" rel="external nofollow" />
</head>
<body>
 <div id="app"></div>
 <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
 <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
 <script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
 <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
 <script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script>
 <!-- built files will be auto injected -->
</body>

2、在 webpack.config.js 配置文件

module.exports = {
 ···
  externals: {
   'vue': 'Vue',
   'vuex': 'Vuex',
   'vue-router': 'VueRouter',
   'element-ui': 'ELEMENT',
   'Axios':'axios'
  }
 },

3、卸载依赖的 npm 包，npm uninstall axios element-ui vue vue-router vuex

4、修改 main.js 文件里之前的引包方式

// import Vue from 'vue'
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
// import VueRouter from 'vue-router'

import App from './App.vue'
import routes from './router'
import utils from './utils/Utils'

Vue.use(ELEMENT)
Vue.use(VueRouter)

const router = new VueRouter({
 mode: 'hash', //路由的模式
 routes
})

new Vue({
 router,
 el: '#app',
 render: h => h(App)
})

8、使用 HappyPack 多进程解析和处理文件

  • 由于运行在 Node.js 之上的 Webpack 是单线程模型的，所以 Webpack 需要处理的事情需要一件一件的做，不能多件事一起做。
  • HappyPack 就能让 Webpack 把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。
  • HappyPack 对 file-loader、url-loader 支持的不友好，所以不建议对该 loader 使用。

使用方法如下：

1、HappyPack 插件安装： npm i -D happypack
2、webpack.base.conf.js 文件对 module.rules 进行配置

module: {
 rules: [
  {
   test: /\.js$/,
   use: ['happypack/loader?id=babel'],
   include: [resolve('src'), resolve('test')],
   exclude: path.resolve(__dirname, 'node_modules')
  },
  {
   test: /\.vue$/,
   use: ['happypack/loader?id=vue']
  }
 ]
}

3、在生产环境 webpack.prod.conf.js 文件进行配置

const HappyPack = require('happypack')
// 构造出共享进程池，在进程池中包含5个子进程
const HappyPackThreadPool = HappyPack.ThreadPool({ size: 5 })
plugins: [
 new HappyPack({
  // 用唯一的标识符id，来代表当前的HappyPack是用来处理一类特定的文件
  id: 'babel',
  // 如何处理.js文件，用法和Loader配置中一样
  loaders: ['babel-loader?cacheDirectory'],
  threadPool: HappyPackThreadPool
 }),
 new HappyPack({
  id: 'vue', // 用唯一的标识符id，来代表当前的HappyPack是用来处理一类特定的文件
  loaders: [
   {
    loader: 'vue-loader',
    options: vueLoaderConfig
   }
  ],
  threadPool: HappyPackThreadPool
 })
]

总结

  • 比较实用的方法: 按需加载，优化loader配置，关闭生产环境的sourceMap，CDN优化。
  • vue-cli已做的优化： 代码压缩，提取公共代码，再优化空间不大。
  • 根据项目实际需要和自身开发水平选择优化方法，必须避免因为优化产生bug。

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

webpack打包优化的几个方法总结

- Author -

michael

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 变量命名规则
Sep 23 Javascript
JS使用eval()动态创建变量的方法
Jun 03 Javascript
DIV+CSS+jQ实现省市联动可扩展
Jun 22 Javascript
AngularJs Forms详解及简单示例
Sep 01 Javascript
Vue.js快速入门教程
Sep 07 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
Dec 07 Javascript
javascript将非数值转换为数值
Sep 13 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
Dec 06 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
Jan 03 Javascript
JS隐藏号码中间4位代码实例
Apr 09 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
js实现点击上传图片并设为模糊背景
Aug 02 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
Feb 10 #Javascript
node.js制作一个简单的登录拦截器
Feb 10 #Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
Feb 10 #Javascript
jQuery实现简易QQ聊天框
Feb 10 #jQuery
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 #Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
Feb 09 #Javascript
如何基于javascript实现贪吃蛇游戏
Feb 09 #Javascript
mysql.user(1) 定时任务(2) 信号库(1) blinker(1) turtle(1) limit(1) MYSQL函数(1) 绘图(1) 计时器(1) Mysql报错(1)
You might like
php设置允许大文件上传示例代码
2014/03/10 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
别了 JavaScript中的isXX系列
2012/08/01 Javascript
JavaScript高级程序设计（第3版）学习笔记12 js正则表达式
2012/10/11 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
小巧强大的jquery layer弹窗弹层插件
2015/12/06 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
2016/05/04 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
详解在Vue中有条件地使用CSS类
2017/09/30 Javascript
Python分治法定义与应用实例详解
2017/07/28 Python
详解Python if-elif-else知识点
2018/06/11 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
详解Python3 基本数据类型
2019/04/19 Python
docker django无法访问redis容器的解决方法
2019/08/21 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
使用Python实现画一个中国地图
2019/11/23 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
Pandas之缺失数据的实现
2021/01/06 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
CSS3实现div从下往上滑入滑出效果示例
2020/04/28 HTML / CSS
John Varvatos官方网站：设计师男士时装
2017/02/08 全球购物
Eclipse面试题
2014/03/22 面试题
利用指针变量实现队列的入队操作
2012/04/07 面试题
如何查找和删除数据库中的重复数据
2014/11/05 面试题
介绍一下write命令
2014/08/10 面试题
初中女生自我鉴定
2013/12/19 职场文书
小学生期末自我鉴定
2014/01/19 职场文书
违纪检讨书2000字
2014/02/08 职场文书
《跨越百年的美丽》教学反思
2014/02/11 职场文书
教师通用专业自荐书范文
2014/02/11 职场文书
导航工程专业自荐信
2014/09/02 职场文书
环保主题班会教案
2015/08/13 职场文书
Golang二维数组的使用方式
2021/05/28 Golang
【海涛解说】史上最给力比赛，挑战DOTA极限
2022/04/01 DOTA