webpack打包速度和性能再次优化
一. 改单dll为双dll
因为上图原因,使用CommonsChunkPlugin时,导致其打包出来的vendors.js内的模块ID会因为其他文件引用模块数量的变化而变化。
所以现利用DllPlugin打包原vendors.js打包的文件,命名依然为vendor,文件名:vendor.js。
二. 利用cache和多线程提高编译速度:
时间(s) | 优化前 | 优化后 |
webpack cach:true | 55 | 54 |
babel-loader?cacheDirectory=true | 54 | 35 |
webpack-parallel-uglify-plugin | 36.7 | 27.98 |
happypack | 36 | 34.33 |
uglifyjs-webpack-plugin | 39 | 21.20 |
三. 更换js压缩插件为:uglifyjs-webpack-plugin
可以使用多线程加速,但有一个问题,目前使用版本是:1.1.8
此插件压缩功能只支持如下配置:
output: {
filename: 'js/[name].[chunkhash:8].js'
} 或 output: {
filename: 'js/[name].js'
}
不支持:
output: {
filename: 'js/[name].js?v=[chunkhash:8]'
}
相关issue: https://github.com/webpack-contrib/uglifyjs-webpack-plugin/issues/220
基于以上原因,更改覆盖式发布为非覆盖式发布方式 js/[name].[chunkhash:8].js , 这时你可能会用到如下插件来动态插入css和js:
功能对比 | add-asset-html-webpack-plugin | html-webpack-include-assets-plugin | 备注 |
hash |
根据具体文件内容计算哈希值 自动加在文件名后:xxx?as68d7 |
webpack编译环境hash值,所有文件的hash值统一,且一旦编译环境有改动,hash即变化 自动加在文件名后:xxx?as68d7 |
|
待插入文件 | filepath字段,支持glob | assets字段,支持glob | |
插入html的位置 | head或body最后,其他引用资源的前面,不可选择位置 | 可选择插入在其他引用资源的前面或后面 |
其他引用资源值htmlWebpackPlugin 插入的资源 |
copy文件 | 会把filepath文件copy到publicPath下 | 不会copy文件 |
举例如下:
new AddAssetHtmlPlugin([
{
filepath: outDir + '/js/lib/dll.js',
publicPath: outPublicDir + 'js/lib/',
outputPath: './js/lib',
hash: true,
includeSourcemap: false
},
{
filepath: outDir + '/js/vendor.js',
publicPath: outPublicDir + 'js/',
outputPath: './js',
hash: true,
includeSourcemap: false
},
{
filepath: outDir + '/css/vendor.css',
publicPath: outPublicDir + 'css/',
outputPath: './css',
hash: true,
includeSourcemap: false,
typeOfAsset:'css'
}
])
new HtmlWebpackIncludeAssetsPlugin({
assets: [getLatestFile('js/lib/dll.js')],
append: false
}),
new HtmlWebpackIncludeAssetsPlugin({
assets: [getLatestFile('js/vendor.js')],
append: false
}),
new HtmlWebpackIncludeAssetsPlugin({
assets: [getLatestFile('css/vendor.css')],
append: false
})
对比后选择:html-webpack-include-assets-plugin,动态顺序插入dll.js, vendor.js, manifest.js和页面功能js由htmlWebpackPlugin插入到最后。
再此基础上,需要手动检索最新的dll.xxx.js 和vendor.xxx.js文件:
getLatestFile('js/vendor.js') function getLatestFile(path){
let new_path = path.replace(/\./g, '.**.');
let latest_file = '';
let latest_file_mtime = 0; glob.sync(outDir + '/' + new_path).forEach(function(file){
let fileInfo = fs.statSync(file);
let file_mtime = +new Date(fileInfo.mtime); latest_file = file_mtime > latest_file_mtime ? file : latest_file;
latest_file_mtime = file_mtime > latest_file_mtime ? file_mtime : latest_file_mtime; }) return latest_file.replace(/^.*\/(js\/|css\/)/ig, "$1");
}
有个问题即,如果你是本地编译后上传发布编译后的代码,那么因为是非覆盖式发布,manifest.js内的runtime一直变化导致所有引入manifest的html 都会变化。这个问题目前解决方案是把编译部署这两步移到服务器进行,我们只关注并提交源码即可。比如可以利用gitlab+jenkins的方式。
附:nodejs一些常用方法简介
glob:
基于javascript, 使用 minimatch 库(各种正则)来进行匹配获取文件路径
var glob = require("glob") // options 是可选的
glob("**/*.js", options, function (er, files) {
// files 是匹配到的文件的数组.
// 如果 `nonull` 选项被设置为true, 而且没有找到任何文件,那么files就是glob规则本身,而不是空数组
// er是当寻找的过程中遇的错误
})
glob.sync() 同步获取
var files = glob.sync(pattern, [options])
fs:
Node.js内置的fs
模块就是文件系统模块,负责读写文件。和所有其它JavaScript模块不同的是,fs
模块同时提供了异步和同步的方法。
fs异步: 'use strict'; var fs = require('fs'); fs.readFile('sample.txt', 'utf-8', function (err, data) {
if (err) {
console.log(err);
} else {
console.log(data);
}
}); fs同步: try {
var data = fs.readFileSync('sample.txt', 'utf-8');
console.log(data);
} catch (err) {
// 出错了
}
path.resolve: 相对路径转绝对路径
path.stat: 获取文件属性比如大小,时间等
附2:自己根据文件内容计算文件hash值方法:
const fs = require('fs');
const crypto = require('crypto');
function getFileHash(path){
let file = fs.readFileSync(path);
let hash = crypto.createHash('md5');
hash.update(file); return hash.digest('hex');
}
webpack打包速度和性能再次优化的更多相关文章
- 优化webpack打包速度方案
基本原理要么不进行打包:要么缓存文件,不进行打包:要么加快打包速度. 不进行打包方案: 1,能够用CDN处理的用CDN处理,比如项目引入的第三方依赖jquery.js,百度编辑器 先进行打包或者缓存然 ...
- 提升webpack打包速度
webpack打包文件体积过大,怎么提升速度? 借助webpack visualizer可视化插件,来看构建的情况.这个问题要具体情况具体分析,看看打包文件有哪些块头比较大,哪些不常改变,最好列一个l ...
- 优化Webpack打包速度
1. Webpack 可以配置 externals 来将依赖的库指向全局变量,从而不再打包这个库,比如对于这样一个文件: import React from 'react'; console.lo ...
- 解决webpack打包速度慢的解决办法
技巧1 webpack在打包的时候第一次总是会做很长的准备工作,包括加载插件之类的.在刚接触webpack的时候总是webpack一下-测一下-改一下-再webpack一下,这种方式最后让很多人崩溃了 ...
- webpack打包性能分析
1. 如何定位webpack打包速度慢的原因 首先需要定位webpack打包速度慢的原因,才能因地制宜采取合适的方案,我们可以在终端输入: webpack --profile --json > ...
- Webpack 打包太慢? 试试 Dllplugin
webpack在build包的时候,有时候会遇到打包时间很长的问题,这里提供了一个解决方案,让打包如丝般顺滑~ 1. 介绍 在用 Webpack 打包的时候,对于一些不经常更新的第三方库,比如 rea ...
- Webpack 打包优化之速度篇
在前文 Webpack 打包优化之体积篇中,对如何减小 Webpack 打包体积,做了些探讨:当然,那些法子对于打包速度的提升,也是大有裨益.然而,打包速度之于开发体验和及时构建,相当重要:所以有必要 ...
- webpack 打包性能优化
webpack 打包性能优化 开启多线程打包 thread-loader https://www.npmjs.com/package/thread-loader https://github.com/ ...
- 性能优化 - 查看 webpack 打包后所有的依赖关系(webpack 可视化工具)
查看 webpack 打包后所有组件与组件间的依赖关系,针对多余的包文件过大, 剔除首次影响加载的效率问题进行剔除修改,本次采用的是 ==webpack-bundle-analyzer(可视化视图查看 ...
随机推荐
- android adapter 中添加OnClickListener事件
public class SearchAutoAdapter extends BaseAdapter { private OnClickListener mOnClickListener; publi ...
- CentOS之7与6的区别
前言 centos7与6之间最大的差别就是初始化技术的不同,7采用的初始化技术是Systemd,并行的运行方式,除了这一点之外,服务启动.开机启动文件.网络命令方面等等,都说6有所不同.让我们先来了解 ...
- How do I copy SQL Azure database to my local development server?(如何将Azure 中的数据库备份到本地)
Now you can use the SQL Server Managerment Studio to do this: Connect to the SQL Azure database. 通过 ...
- [TFRecord格式数据]利用TFRecords存储与读取带标签的图片
利用TFRecords存储与读取带标签的图片 原创文章,转载请注明出处~ 觉得有用的话,欢迎一起讨论相互学习~Follow Me TFRecords其实是一种二进制文件,虽然它不如其他格式好理解,但是 ...
- jboss7.1.1相关error及解决办法
问题1: 报错提示: 公司的网站系统使用的中间是jboss7.1.1 Final,由于有些数据和服务测试环境不具备,免不了要在测试环境调试些jsp页面,发现从jboss社区里下载的jboss应用有个问 ...
- Hadoop学习笔记一
云帆大数据视频学习笔记,记录如下. 一.主机名设置的规范 /etc/hosts文件中添加如下的记录: 192.168.1.128 hadoop-yarn.cloudyhadoop.com had-ya ...
- BZOJ 1426: 收集邮票 [DP 期望 平方]
传送门 题意: 有n种不同的邮票,皮皮想收集所有种类的邮票.唯一的收集方法是到同学凡凡那里购买,每次只能买一张,并且买到的邮票究竟是n种邮票中的哪一种是等概率的,概率均为1/n.但是由于凡凡也很喜欢邮 ...
- BZOJ 4008: [HNOI2015]亚瑟王 [DP 概率 !!!]
传送门 题意: $r$轮$n$张卡牌,每一轮依次考虑每张卡牌,$p_i$概率发动造成$d_i$伤害后结束本轮或者继续考虑下一张 每张卡牌发动过之后以后都会跳过 求$r$轮之后的期望伤害 看了一节课出题 ...
- BZOJ 3790: 神奇项链 [Manacher 贪心]
3790: 神奇项链 Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 405 Solved: 200[Submit][Status][Discuss] ...
- django-rest-framework之请求与响应
前言:在上一篇文章,已经实现了访问指定URL就返回了指定的数据,这也体现了RESTful API的一个理念,每一个URL代表着一个资源.当然我们还知道RESTful API的另一个特性就是,发送不同的 ...