webpack打包性能分析
1. 如何定位webpack打包速度慢的原因
首先需要定位webpack打包速度慢的原因,才能因地制宜采取合适的方案,我们可以在终端输入:
webpack --profile --json > stats.json
然后将输出的json文件上传到如下2个网站进行分析
http://alexkuz.github.io/webpack-chart/
https://github.com/webpack/analyse
关于性能优化,这篇文章写的比较全面:
http://hao.jser.com/archive/13592/
cli
http://webpack.github.io/docs/cli.html#progress
webpack打包优化
https://zhuanlan.zhihu.com/p/25212283
作者:trigkit4
链接:https://zhuanlan.zhihu.com/p/25212283
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
1.减小打包文件体积
2.代码压缩
webpack提供的UglifyJS插件由于采用单线程压缩,速度很慢 ,
webpack-parallel-uglify-plugin插件可以并行运行UglifyJS插件,这可以有效减少构建时间,当然,该插件应用于生产环境而非开发环境,配置如下:
var ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
new ParallelUglifyPlugin({
cacheDir: '.cache/',
uglifyJS:{
output: {
comments: false
},
compress: {
warnings: false
}
}
})
3.happypack
happypack 的原理是让loader可以多进程去处理文件,原理如图示:
http://taobaofed.org/blog/2016/12/08/happypack-source-code-analysis/
https://github.com/amireh/happypack/blob/master/examples/webpack2-extract-react/webpack.config.js
此外,happypack同时还利用缓存来使得rebuild 更快
var HappyPack = require('happypack'),
os = require('os'),
happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length }); modules: {
loaders: [
{
test: /\.js|jsx$/,
loader: 'HappyPack/loader?id=jsHappy',
exclude: /node_modules/
}
]
} plugins: [
new HappyPack({
id: 'jsHappy',
cache: true,
threadPool: happyThreadPool,
loaders: [{
path: 'babel',
query: {
cacheDirectory: '.webpack_cache',
presets: [
'es2015',
'react'
]
}
}]
}),
//如果有单独提取css文件的话
new HappyPack({
id: 'lessHappy',
loaders: ['style','css','less']
})
]
4.缓存与增量构建
由于项目中主要使用的是react.js和es6,结合webpack的babel-loader加载器进行编译,每次重新构建都需要重新编译一次,我们可以针对这个进行增量构建,而不需要每次都全量构建。
babel-loader可以缓存处理过的模块,对于没有修改过的文件不会再重新编译,cacheDirectory有着2倍以上的速度提升,这对于rebuild 有着非常大的性能提升。
var node_modules = path.resolve(__dirname, 'node_modules');
var pathToReact = path.resolve(node_modules, 'react/react');
var pathToReactDOM = path.resolve(node_modules,'react-dom/index'); {
test: /\.js|jsx$/,
include: path.join(__dirname, 'src'),
exclude: /node_modules/,
loaders: ['react-hot','babel-loader?cacheDirectory'],
noParse: [pathToReact,pathToReactDOM]
}
babel-loader让除了node_modules目录下的js文件都支持es6语法,注意exclude: /node_modules/很重要,否则 babel 可能会把node_modules中所有模块都用 babel 编译一遍!
当然,你还需要一个像这样的.babelrc文件,配置如下:
{
"presets": ["es2015", "stage-0", "react"],
"plugins": ["transform-runtime"]
}
这是一劳永逸的做法,何乐而不为呢?除此之外,我们还可以使用webpack自带的cache,以缓存生成的模块和chunks以提高多个增量构建的性能。
在webpack的整个构建过程中,有多个地方提供了缓存的机会,如果我们打开了这些缓存,会大大加速我们的构建
webpack打包性能分析的更多相关文章
- webpack 打包性能分析工具
webpack-bundle-analyzer,推荐使用 新版 vue-cli (旧版按照新版的进行配置即可)已经集成该插件,在项目的 package.json 文件中注入如下命令,然后运行(npm ...
- webpack 打包性能优化
webpack 打包性能优化 开启多线程打包 thread-loader https://www.npmjs.com/package/thread-loader https://github.com/ ...
- webpack打包性能优化
1. 使用 gzip 压缩打包后的 js 文件 这个方法优化浏览器下载时的文件大小(打包后的文件大小没有改变) webpack.config.prod.js 中 var CompressionWebp ...
- webpack打包出错分析
Module not found: Error: Can't resolve 'bundle.js' in 更改打包命令 webpack run1.js -o bundle.js
- 彻底解决Webpack打包慢的问题
转载 这几天写腾讯实习生 Mini 项目的时候用上了 React 全家桶,当然同时引入了 Webpack 作为打包工具.但是开发过程中遇到一个很棘手的问题就是,React 加上 React-Route ...
- 性能优化 - 查看 webpack 打包后所有的依赖关系(webpack 可视化工具)
查看 webpack 打包后所有组件与组件间的依赖关系,针对多余的包文件过大, 剔除首次影响加载的效率问题进行剔除修改,本次采用的是 ==webpack-bundle-analyzer(可视化视图查看 ...
- Webpack 打包之体积优化
谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝 ...
- 优化Webpack构建性能的几点建议
Webpack 作为目前最流行的前端构建工具之一,在 vue/react 等 Framework 的生态圈中都占据重要地位.在开发现代 Web 应用的过程中,Webpack 和我们的开发过程和发布过程 ...
- [转] Webpack 打包优化之体积篇
谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝 ...
随机推荐
- 洛谷 - P1663 - 山 - 半平面交
https://www.luogu.org/problemnew/show/P1663 给定山的性状,求一个最低点可以看见所有的地方. 就是半平面交. 粘贴全家福: #include<bits/ ...
- 已有项目 iPhoneX 适配
一.Assets 文件图片管理下的 LaunchImage 添加 iOS8.0 and latter 一项,并放一张 1125*2436 的LaunchPage 到对应的位置上. 二.有关 iPhon ...
- HDU2844【背包问题(二进制优化)】
题意: n,m 给出A1,A2,A3...AN;C1,C2,C3...CN; 给出硬币的价值和个数,问在1-M中间能构造出多少个组合 思路: n种物品的价值,n种物品的个数: 一种物品能组成多种物品的 ...
- Unity3D命令行Build
转自:http://www.cnblogs.com/gameprogram/archive/2012/05/11/2496303.html 本来是没想用这个命令行Build方式,可惜电脑不知道怎么的就 ...
- [Xcode 实际操作]九、实用进阶-(1)隐藏顶部的状态栏
目录:[Swift]Xcode实际操作 本文将演示隐藏顶部的状态栏. 在项目导航区,打开项目配置文件[Info.plist] 每个程序都拥有自己的项目配置文件,用来存储各种配置信息. 鼠标右键[Add ...
- 第二篇 Nosql讲解之windows下memcache的安装(一)
memcached基本概念 1.Memcached是danga的一个项目,最早是LiveJournal服务的,最初为了加速LiveJournal访问速度而开发的,后来被很多大型的网站采用. 官方网站: ...
- 单片机的C语言中位操作用法
在对单处机进行编程的过程中,对位的操作是经常遇到的.C51对位的操控能力是非常强大的.从这一点上,就可以看出C不光具有高级语言的灵活性,又有低级语言贴近硬件的特点.这也是在各个领域中都可以看到C的重要 ...
- JS实现 类的 1.判断 2.添加 3.删除 4切换
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 寻找Windows下MySQL的错误日志
https://blog.csdn.net/dreamcs/article/details/53502625
- Azure service bus Topic基本用法
我们在升级一个POS系统的时候,决定使用微软公有云计算平台下的Azure ServiceBus 进行POS客户端与服务器的交互. 本文主要时作者在学习使用 Azure SDK for .NET 操作由 ...