vue打包后出现文件过大加载速度过慢问题解决方案
Administrator
0 阅读
博客
我们在处理网站加载速度过慢问题是，首先想到的是cdn加速，还有一种解决方案，这种方案作用于nginx服务。
下面是我做网站配置的解决方案：
新建一个vue项目，打包之后发现会有一个文件特别大，特别是引入的插件越多，这个文件就越大，查阅资料发现这是我们的node_modules打包之后生成的文件。
webpack配置可以将文件打包为.gz文件，传入nginx服务器之后，开启相关配置，他就会自动解压，这是这个文件就会成倍的减小。
webpack的配置如下：
//js html css配置
configureWebpack: (config) => {
/* gzip压缩 */
const productionGzipExtensions = ['html', 'js', 'css']
config.plugins.push(
new CompressionWebpackPlugin({
filename: '[path][base].gz',
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240, // 只有大小大于该值的资源会被处理 10240
minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
deleteOriginalAssets: false, // 删除原文件
})
)
}
|
需要导入的插件是
npm i compression-webpack-plugin
|
图片压缩的代码如下：
chainWebpack: config => {
/* 压缩图片 */
config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({ bypassOnDebug: true })
.end()
}
|
需要导入的插件如下：
npm install image-webpack-loader --save-dev
|
