> 首页 > 文章 > 八卦 > webpack打包优化怎么做

webpack打包优化怎么做

来源:网络 作者:网友上传 时间:06-29 手机版

很多用Vue开发的项目中,都会遇到首屏加载慢,chunk-vendor.js动不动就好几MB,那么如何通过Vue的内部配置去优化我们的Vue项目呢?这是手头的一个项目,同样的源码,同样的服务器,打开了Disable cache,目前完全加载是6.82秒

优化后,加载时间才2.59秒,提升了60%的加载

其实出发点还是比较好理解的,压缩js和使用CDN因为我这边用的Linux服务器,然后安装的宝塔,使用的Nginx,默认是开启了Gzip,所以我们可以先安装compression-webpack-pluginyarn add compression-webpack-plugin或者npm install compression-webpack-plugin


然后,我们在vue.config.js中做如下的配置const CompressionWebpackPlugin = require('compression-webpack-plugin')module.exports = { productionSourceMap: false, configureWebpack: config => { if (isProduction) { // 开启gzip压缩 config.plugins.push(new CompressionWebpackPlugin({ algorithm: 'gzip', test: /\.js$|\.html$|\.json$|\.css/, threshold: 10240, minRatio: 0.8 })) } }}

这样,Gzip就可以在打包的时候生成了,如下图,打包前后体积还是很明显的,但是这样是不够的

为了防止文件过大,我们先把公共代码分离config.optimization = { runtimeChunk: 'single', splitChunks: { chunks: 'all', maxInitialRequests: Infinity, minSize: 20000, cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name(module) { const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1] return `npm.${packageName.replace('@', '')}` } } } }}


打包后的效果,如下图

那么,在最后就是用CDN这里就引入一个vue.js作为例子config.externals = { vue: 'Vue'}


需要在你的public/index.html的body标签中引用对应版本的vue.js

然后整体打包,ok,附上完整的vue.config.jsconst path = require('path')const CompressionWebpackPlugin = require('compression-webpack-plugin')const appname = 'index'function resolve(dir) { return path.join(__dirname, dir)}const isProduction = process.env.NODE_ENV === 'production'// vue.config.jsmodule.exports = { productionSourceMap: false, outputDir: appname + 'OutPutFile', // 运行时生成的生产环境构建文件的目录(默认""dist"",构建之前会被清除) assetsDir: appname + 'public', //放置生成的静态资源(s、css、img、fonts)的(相对于 outputDir 的)目录(默认"") indexPath: appname + '.html', //指定生成的 index.html 的输出路径(相对于 outputDir)也可以是一个绝对路径。 configureWebpack: config => { if (isProduction) { // 开启gzip压缩 config.plugins.push(new CompressionWebpackPlugin({ algorithm: 'gzip', test: /\.js$|\.html$|\.json$|\.css/, threshold: 10240, minRatio: 0.8 })) config.optimization = { runtimeChunk: 'single', splitChunks: { chunks: 'all', maxInitialRequests: Infinity, minSize: 20000, cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name(module) { const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1] return `npm.${packageName.replace('@', '')}` } } } } } config.performance = { hints: 'warning', //入口起点的最大体积 maxEntrypointSize: 50000000, //生成文件的最大体积 maxAssetSize: 30000000, //只给出 js 文件的性能提示 assetFilter: function(assetFilename) { return assetFilename.endsWith('.js') } } config.externals = { vue: 'Vue' } } }, chainWebpack: (config) => { config.resolve.alias .set('@$', resolve('src')) .set('@api', resolve('src/api')) .set('@assets', resolve('src/assets')) .set('@comp', resolve('src/components')) .set('@views', resolve('src/views')) .set('@layout', resolve('src/layout')) .set('@static', resolve('src/static')) }, css: { }, lintOnSave: undefined}


最后的一点建议,如果条件允许,能走cdn尽量走cdn,效果还是比较惊人的。


如何解决webpack打包后,dist文件过大的问题

去除不必要的插件
刚开始用 webpack 的时候,开发环境和生产环境用的是同一个 webpack 配置文件,导致生产环境打包的 JS 文件包含了一大堆没必要的插件,比如 HotModuleReplacementPlugin, NoErrorsPlugin... 这时候不管用什么优化方式,都没多大效果。所以,如果你打包后的文件非常大的话,先检查下是不是包含了这些插件。
提取第三方库
像 react 这个库的核心代码就有 627 KB,这样和我们的源代码放在一起打包,体积肯定会很大。所以可以在 webpack 中设置
{
entry: {
bundle: 'app'
vendor: ['react']
}
plugins: {
new webpack.optimize.CommonsChunkPlugin('vendor','vendor.js')
}
}
这样打包之后就会多出一个 vendor.js 文件,之后在引入我们自己的代码之前,都要先引入这个文件。比如在 index.html 中
<script src="/build/vendor.js"></script>
<script src="/build/bundle.js"></script>
除了这种方式之外,还可以通过引用外部文件的方式引入第三方库,比如像下面的配置
{
externals: {
'react': 'React'
}
}
externals 对象的 key 是给 require 时用的,比如 require('react'),对象的 value 表示的是如何在 global 中访问到该对象,这里是 window.React。这时候 index.html 就变成下面这样
<script src="//cdn.bootcss.com/react/0.14.7/react.min.js"></script>
<script src="/build/bundle.js"></script>
当然,个人更推荐第一种方式。
代码压缩
webpack 自带了一个压缩插件 UglifyJsPlugin,只需要在配置文件中引入即可。
{
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
}
加入了这个插件之后,编译的速度会明显变慢,所以一般只在生产环境启用。
另外,服务器端还可以开启 gzip 压缩,优化的效果更明显。
代码分割
什么是代码分割呢?我们知道,一般加载一个网页都会把全部的 js 代码都加载下来。但是对于 web app 来说,我们更想要的是只加载当前 UI 的代码,没有点击的部分不加载。
看起来好像挺麻烦,但是通过 webpack 的 code split 以及配合 react router 就可以方便实现。具体的例子可以看下 react router 的官方示例 huge apps。不过这里还是讲下之前配置踩过的坑。
code split 是不支持 ES6 的模块系统的,所以在导入和导出的时候千万要注意,特别是导出。如果你导出组件的时候用 ES6 的方式,这时候不管导入是用 CommomJs 还是 AMD,都会失败,而且还不会报错!
当然会踩到这个坑也是因为我刚刚才用 NodeJS,而且一入门就是用 ES6 的风格。除了这个之外,还有一点也要注意,在生产环境的 webpack 配置文件中,要加上 publicPath
output: {
path: xxx,
publicPath: yyy,
filename: 'bundle.js'
}
不然的话,webpack 在加载 chunk 的时候,路径会出错。
设置缓存
开始这个小节之前,可以先看下大神的一篇文章:大公司里怎样开发和部署前端代码。
对于静态文件,第一次获取之后,文件内容没改变的话,浏览器直接读取缓存文件即可。那如果缓存设置过长,文件要更新怎么办呢?嗯,以文件内容的 MD5 作为文件名就是一个不错的解决方案。来看下用 webpack 应该怎样实现
output: {
path: xxx,
publicPath: yyy,
filename: '[name]-[chunkhash:6].js'
}
打包后的文件名加入了 hash 值
const bundler = webpack(config)
bundler.run((err, stats) => {
let assets = stats.toJson().assets
let name
for (let i = 0; i < assets.length; i++) {
if (assets[i].name.startsWith('main')) {
name = assets[i].name
break
}
}
fs.stat(config.buildTemplatePath, (err, stats) => {
if (err) {
fs.mkdirSync(config.buildTemplatePath)
}
writeTemplate(name)
})
})
手动调用 webpack 的 API,获取打包后的文件名,通过 writeTemplate 更新 html 代码。完整代码猛戳 gitst。

npm run build 打包优化

1、优化之前 是?

2、 去掉console.log、警告、注释、debugger

参照:/lmy0111ly/article/details/93979006

blogs.com/jishugaochao/p/10180416.html

webpack.prod.conf中UglifyJsPlugin配置

线上去掉查看源码功能:sourceMap:false

去掉注释 :comments:false,

缓存:cache:true,

去掉console.log\警告、注释、debugger

drop_console: true, drop_debugger:true, pure_funcs: ['console.log']

优化了一大半?

3. 关闭Prefetch

4、启用DllPlugin和DllReferencePlugin预编译库文件

参照: https://juejin.im/post/5a622613f265da3e5342475c

5、minChunks: 3

相关推荐:

华硕顽石五代配置

webpack打包优化怎么做

sql

怎么样辨别苹果耳机真假

打破美元霸权,中东打响“石油人民币”第一枪,多国为何加速“去美元化”?

币圈惊现120亿洗钱大案!63人被捕,现金堆成小山

多个门店人去楼空!杭州这家知名连锁店怎么了?消费者急了:充了近2万块

应设尽设

标签: 怎么做 webpack

声明:《webpack打包优化怎么做》一文由排行榜大全(网友上传 )网友供稿,版权归原作者本人所有,转载请注明出处。如果您对文章有异议,可在反馈入口提交处理!

最近更新

  • 家装铁楼梯制作方法

    1、铁艺楼梯扶手的制作过程一般都要先根据施工现场测量,画出图纸,设计出楼梯扶手的样式,再去制作铁艺楼梯扶手,后按照图纸进行安装。不管是楼梯...

    百科 日期:2023-06-29

  • 华硕顽石五代配置

    槽序受不了,这是我第三字码字了,因为前面两次因为图片剪切原因都没有保存,一直是菊花转动的状态,我一刷新就没了。槽品为什么这么说呢?因为这款...

    八卦 日期:2023-06-29

  • 8公里开车要多久

    1、在城市道路驾驶时8公里开车需要20分钟左右,如果在高速公路上行驶需要两分钟左右。在驾驶车辆过程中,需要根据道路的状况进行灵活调节汽车的...

    汽车 日期:2023-06-29

  • 2023武汉东湖免费门票预约最新规则

    2023武汉东湖免费门票预约预约时间 2023年1月20日-2月6日9:00-20:00,可预约2023年1月22日-2月8日惠民券入园时间 游客成功预约的指定日期。(1...

    景点 日期:2023-06-29

  • 二手风度本田多少钱

    二手风度本田多少钱只开三年就换车的建议,独立又便宜。如果你打算开3年以上,我们合资吧。力帆的老板给儿子买了3000万的布加迪威龙,力帆汽车是...

    汽车 日期:2023-06-29

  • webpack打包优化怎么做

    很多用Vue开发的项目中,都会遇到首屏加载慢,chunk-vendor.js动不动就好几MB,那么如何通过Vue的内部配置去优化我们的Vue项目呢?这是手头的一个...

    八卦 日期:2023-06-29

  • 轮胎存放时间和方法

    1、轮胎的储存寿命一般为3年,3年后不建议购买和使用轮胎,因为它们的性能已经大大降低。但这也取决于储存方法。一般新轮胎都是包裹的,这层包...

    百科 日期:2023-06-29

  • 2023成都金沙太阳节特色灯组亮点+开灯时间

    看灯时间:2023年1月19日—2月5日每晚18:30—22:00看灯地点:金沙遗址博物馆园区,由南门(金沙遗址路2号)进入最为方便,可一路沿主干道欣赏。2023...

    景点 日期:2023-06-29

邮箱不能为空
留下您的宝贵意见