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. html5代码如何转成小程序代码

    插件源码 链接:https://pan.baidu.com/s/1pGY8ZsdESaQGEzoEgpb_Rw 提取码:s1ix  放到与pages文件夹同级目录下 js中调用 //引入 var wx ...

  2. (水题)HDU - 1077 - Catching Fish - 计算几何

    http://acm.hdu.edu.cn/showproblem.php?pid=1077 很明显这样的圆,必定有两个点在边界上.n平方枚举圆,再n立方暴力判断.由于没有给T,所以不知道行不行.

  3. HDU5122【水】

    题意: 有n个数,然后按照冒泡排序的手段,只能往后移,然后问你最小几轮可以实现1-n 思路: 后边有比他小的数的话就一定要到后面去 求一下有多少个 PS: 如果还可以往前移,那么我们可以求一个最大确定 ...

  4. unity5之代码创建状态机,玩的666

    http://blog.csdn.net/litaog00/article/details/50483189 最近做项目的时候用到了状态机,网上搜了一下帖子,大部分都是简单介绍使用方法的,讲解的详细的 ...

  5. [Xcode 实际操作]八、网络与多线程-(7)使用MessageUI框架,创建并发送一封带有附件的邮件

    目录:[Swift]Xcode实际操作 本文将演示如何使用MessageUI框架,创建并发送一封带有附件的邮件. 使用邮件编辑视图控制器(MFMailComposeViewController)实现邮 ...

  6. jq weui 滚动加载的坑

    1.一般情况下使用官网给个demo就可以了,如下: var loading = false; //状态标记 $(document.body).infinite().on("infinite& ...

  7. 在 UIViewController 中手动增加 TableView 出现 Type 'SomeViewController' does not confirm to protocol 'UITableViewDataSource' 问题的解决办法

    许多时候我们都有在普通的继承自 UIViewController 的控制器中使用 TableView 的需求,这时候就需要当前控制器类继承 UITableViewDelegate 和 UITableV ...

  8. 笔记-JavaWeb学习之旅6

    表格标签: table:定义表格 width :宽度 border:边框 cellpadding:定义内容和单元格的距离了 cellspacing:定义单元格之间的距离 bgcolor:背景色 tr: ...

  9. File upload in ASP.NET Core web API

    参考1:File upload in ASP.NET Core web API https://www.janaks.com.np/file-upload-asp-net-core-web-api/ ...

  10. MyBatis逆向工程中domainObjectRenamingRule报错或无效

    使用domainObjectRenamingRule报错 在使用MyBatis逆向工程时报错如下: org.mybatis.generator.exception.XMLParserException ...