登陆

极彩登录网址-怎么处理webpack打包文件过大的问题

admin 2019-10-28 157人围观 ,发现0个评论

vue-cli全家套信任很多人都用过,但或许很多人不太清楚webpack为处理打包文件过大做了哪些工作,今日咱们就主要来聊聊这个。

首要装备全局变量

首要,经过指定环境,告知webpack咱们当时处于production环境中,要依照production的办法去打极彩登录网址-怎么处理webpack打包文件过大的问题包。

 //指定环境,将process.env.NODE_ENV环海兔境与library相关
new Webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production'),
})

优化devtool中的source-map.

dev-tool供给了很多种选项,用来增强咱们debug的才能,咱们熟知的有:source-map,inline-source-map,cheap-source-map等等。具体的用法能够参阅 Devtool官方文档(https://webpack.github.io/docs/configuration.html#devtool )。假如你的文件在打包之后忽然变成好几M,那么不必想,必定是因为source-map的原因。source-map在开发阶段的确很好用,调试起来很便利,但是在出产环境下就没必要布置了。 主张在prod环境下封闭source-map。

剥离css文件,独自打包

装置webpack插件extract-text-webpack-plugin。

npm install extract-text-webpack-plugin --save-dev。
//运用办法:
plugins:[
new ExtractTextPlugin('static/css/styles.[contenthash].css'),
]

这儿运用了contenthash,webpack会依据内容极彩登录网址-怎么处理webpack打包文件过大的问题去生成hash值。

运用UglifyJSPlugin紧缩。

经过UglifyJSPlugin能够紧缩咱们的*.js文件。

//装置办法: 
npm install uglifyjs-webpack-plugin --save-dev。
//运用办法
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
plugins: [
new UglifyJSPlugin({
parallel: 4,
uglifyOptions: {
output: {
comments: false,
beautify: false,
},
compress: {
warnings: false
},
},
cache: true,
}),
]
}

提极彩登录网址-怎么处理webpack打包文件过大的问题取公共依靠

运用CommonsChunkPlugin插件,将多个js文件进行提取,树立一个独立的文件。这个文件包括一些共用模块,浏这样览器只在刚开始的时分加载一次,便缓存起来供后续运用。而不必每次拜访一个新界面时,再去加载一个更大的文件。

 entry:{
app:'./entry',
vendor:['react','other-lib'],
},
plugins:[
new Webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
}),
]

敞开gzip紧缩

咱们运用compression-webpack-plugin插件进行紧缩。 装置:npm install compression-webpack-plugin --save-dev。 compression-webpack-plugin 具体用法 运用:

const CompressionPlugin = require("compression-webpack-plugin");
plugins:[
new CompressionPlugin({
asset: '[path].gz[query]', //方针资源称号。[file] 会被替换成原资源。[path] 会被替换成原资源途径,[query] 替换成原查询字符串
algorithm: 'gzip',//算法
test: new RegExp(
'\\.(js|css)$' //紧缩 js 与 css
),
threshold: 10240,//只处理比这个值大的资源。按字节核算
minRatio: 0.8//只要紧缩率比这个值小的资源才会被处理
})
]

紧缩成果:

敞开html紧缩,主动增加上面生成的静态资源

增加插件html-webpack极彩登录网址-怎么处理webpack打包文件过大的问题-plugin。

//装置: 
npm install html-webpack-plugin --save-dev
//运用办法:
plugins:[
new HtmlWebpackP极彩登录网址-怎么处理webpack打包文件过大的问题lugin({
title: '',
template: __dirname + '/../public/index.html',
mini极彩登录网址-怎么处理webpack打包文件过大的问题fy: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
chunksSortMode:'dependency'
}),
]
请关注微信公众号
微信二维码
不容错过
Powered By Z-BlogPHP