vue打包,减小chunk.js文件提高加载速度
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
vue.config.js
中的配置(直接复制就能使用)
const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')//这个插件可以看官网还是很好用的
const productionGzipExtensions = ['js', 'css']//对什么文件进行压缩
const Timestamp = new Date().getTime();//防止http的缓存每次打包用时间戳进行区分
module.exports = {
//这里是自己的配置
configureWebpack: {
output: { // 输出重构 打包编译后的 文件名称
filename: `js/[name]${Timestamp}.js`,
chunkFilename: `js/[name]${Timestamp}.js`
},
plugins: [
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),//该插件能够使得指定目录被忽略,从而使得打包变快,文件变小
// 下面是下载的插件的配置
new CompressionWebpackPlugin({
algorithm: 'gzip',//压缩算法
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),//处理所有匹配此 {RegExp} 的资源
threshold: 10240,//只处理比这个值大的资源。按字节计算
minRatio: 0.8//只有压缩率比这个值小的资源才会被处理
}),
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 5, //控制打包生成js的个数
minChunkSize: 100
})
]
},
}
小小的插曲还是很好用的
这里注意下这样压缩完还需要nginx配置一下
server {
#在这个server中加入下面这些代码
gzip on;
gzip_min_length 1k;
gzip_comp_level 9;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
}
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)