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打包性能分析的更多相关文章

  1. webpack 打包性能分析工具

    webpack-bundle-analyzer,推荐使用 新版 vue-cli (旧版按照新版的进行配置即可)已经集成该插件,在项目的 package.json 文件中注入如下命令,然后运行(npm ...

  2. webpack 打包性能优化

    webpack 打包性能优化 开启多线程打包 thread-loader https://www.npmjs.com/package/thread-loader https://github.com/ ...

  3. webpack打包性能优化

    1. 使用 gzip 压缩打包后的 js 文件 这个方法优化浏览器下载时的文件大小(打包后的文件大小没有改变) webpack.config.prod.js 中 var CompressionWebp ...

  4. webpack打包出错分析

    Module not found: Error: Can't resolve 'bundle.js' in 更改打包命令 webpack run1.js  -o bundle.js

  5. 彻底解决Webpack打包慢的问题

    转载 这几天写腾讯实习生 Mini 项目的时候用上了 React 全家桶,当然同时引入了 Webpack 作为打包工具.但是开发过程中遇到一个很棘手的问题就是,React 加上 React-Route ...

  6. 性能优化 - 查看 webpack 打包后所有的依赖关系(webpack 可视化工具)

    查看 webpack 打包后所有组件与组件间的依赖关系,针对多余的包文件过大, 剔除首次影响加载的效率问题进行剔除修改,本次采用的是 ==webpack-bundle-analyzer(可视化视图查看 ...

  7. Webpack 打包之体积优化

    谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝 ...

  8. 优化Webpack构建性能的几点建议

    Webpack 作为目前最流行的前端构建工具之一,在 vue/react 等 Framework 的生态圈中都占据重要地位.在开发现代 Web 应用的过程中,Webpack 和我们的开发过程和发布过程 ...

  9. [转] Webpack 打包优化之体积篇

    谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝 ...

随机推荐

  1. 洛谷 - P1663 - 山 - 半平面交

    https://www.luogu.org/problemnew/show/P1663 给定山的性状,求一个最低点可以看见所有的地方. 就是半平面交. 粘贴全家福: #include<bits/ ...

  2. 已有项目 iPhoneX 适配

    一.Assets 文件图片管理下的 LaunchImage 添加 iOS8.0 and latter 一项,并放一张 1125*2436 的LaunchPage 到对应的位置上. 二.有关 iPhon ...

  3. HDU2844【背包问题(二进制优化)】

    题意: n,m 给出A1,A2,A3...AN;C1,C2,C3...CN; 给出硬币的价值和个数,问在1-M中间能构造出多少个组合 思路: n种物品的价值,n种物品的个数: 一种物品能组成多种物品的 ...

  4. Unity3D命令行Build

    转自:http://www.cnblogs.com/gameprogram/archive/2012/05/11/2496303.html 本来是没想用这个命令行Build方式,可惜电脑不知道怎么的就 ...

  5. [Xcode 实际操作]九、实用进阶-(1)隐藏顶部的状态栏

    目录:[Swift]Xcode实际操作 本文将演示隐藏顶部的状态栏. 在项目导航区,打开项目配置文件[Info.plist] 每个程序都拥有自己的项目配置文件,用来存储各种配置信息. 鼠标右键[Add ...

  6. 第二篇 Nosql讲解之windows下memcache的安装(一)

    memcached基本概念 1.Memcached是danga的一个项目,最早是LiveJournal服务的,最初为了加速LiveJournal访问速度而开发的,后来被很多大型的网站采用. 官方网站: ...

  7. 单片机的C语言中位操作用法

    在对单处机进行编程的过程中,对位的操作是经常遇到的.C51对位的操控能力是非常强大的.从这一点上,就可以看出C不光具有高级语言的灵活性,又有低级语言贴近硬件的特点.这也是在各个领域中都可以看到C的重要 ...

  8. JS实现 类的 1.判断 2.添加 3.删除 4切换

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. 寻找Windows下MySQL的错误日志

    https://blog.csdn.net/dreamcs/article/details/53502625

  10. Azure service bus Topic基本用法

    我们在升级一个POS系统的时候,决定使用微软公有云计算平台下的Azure ServiceBus 进行POS客户端与服务器的交互. 本文主要时作者在学习使用 Azure SDK for .NET 操作由 ...