vue cli js css压缩方案

在vue.config.js中添加

configureWebpack: {resolve: {alias: {'assets': '@/assets','common': '@/common','components': '@/components','network': '@/network','views': '@/views','plugins': '@/plugins',}},output: {// path: '/dist/',filename: '[name].js',// chunkFilename: 'abcd.js',},optimization: {splitChunks: {cacheGroups: {commons: {name: 'commons',chunks: 'all',minChunks: 2,}}}},plugins: [new webpack.optimize.LimitChunkCountPlugin({maxChunks: 5,}),new CompressionWebpackPlugin({filename: "[path][base].gz",algorithm: 'gzip',test: new RegExp('\\.(js|css)$'),threshold: 10240,minRatio: 0.8,deleteOriginalAssets: true}),],},

打包完生成.gz文件
nginx修改配置
#gzip on;
gzip on;
gzip_static on; # 开启静态文件压缩
gzip_buffers 32 4K;
gzip_comp_level 6;
gzip_min_length 100;
gzip_types application/javascript text/css text/xml;
gzip_disable “MSIE [1-6].”; #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
gzip_vary on;

gzip_static on; 很重要一定要加上

https://webpack.docschina.org/plugins/compression-webpack-plugin/

添加完npm run serve时会有问题
所以更改配置如下：
configureWebpack: (config) => {
if (process.env.NODE_ENV === ‘production’) {
return {
plugins: [
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 5,
}),
new CompressionWebpackPlugin({
algorithm: ‘gzip’,
// test: new RegExp(’\.(’ + productionGzipExtensions.join(’|’) + ‘)$’),
threshold: 10240,
minRatio: 0.8,
deleteOriginalAssets: true
}),
],
}
} else {
return {}
}
}
如果页面空白，控制台有黄色log
多pages中添加配置

vue cli js css压缩方案相关推荐

HBuilder js,css压缩，增强代码的安全性
js.css压缩压缩不是加密,也不是混淆.但压缩后的js文件,往往也具有混淆的功能. js.css压缩是很常见的技术,我们经常看到各种框架的文件名是xxx.min.js,xxx.min.css. 使 ...
Visual Studio下的 JS CSS 压缩和编辑插件
先声明一下,这个只是我的一个设想,目前还没实现 JS压缩?CSS压缩? 这个大家肯定都听说过,一个成熟的网站,JS压缩和CSS压缩是必须的,也是一个很好的提高网站性能的途径. 但是,压缩好的JS和CS ...
网站优化JS css压缩
在nginx 中开启gzip压缩后,可以大大减少资js css 体积,原来200KB,压缩后只有66KB server{gzip on;gzip_types text/plain applicatio ...
maven js css 压缩,使用wro4j和maven在编译期间压缩js和css文件（经典）
最近在对一个web系统做性能优化. 而对用到的静态资源文件的压缩整合则是前端性能优化中很重要的一环. 好处不仅在于能够减小请求的文件体积,而且能够减少浏览器的http请求数. 因为是基于java的we ...
maven js css 压缩,maven压缩js css
maven压缩 net.alchim31.maven yuicompressor-maven-plugin 1.3.0 prepare-package compress UTF-8 false fal ...
vue 实现 js css html分离
方法一分别创建 index.js, index.css index.js: export default {data:function(){return {//...};},methods:{//. ...
中间件-Nginx-静态资源js/css压缩
1.应用场景随着前后端分离的方式越来越盛行,但是我们提升网站加载速度的方式万变不离其中.针对高并发的H5站点,我们在使用npm构建之后完全将所有静态资源存储在CDN上,但是此种方式部署相对麻烦.大多 ...
css compressor java_利用YUI Compressor压缩JS/CSS之终极秘籍
JS/CSS的压缩已经不是什么新鲜话题了,自打YSlow推出后,这方面的优化话题是铺天盖地啊:不过当时作为后知后觉的我,甚至都没法完整地写出一份漂亮的JS/CSS的代码,何尝会去注意呢?! 时至今日, ...
ANT自动化压缩合并JS/CSS和更改版本号
2019独角兽企业重金招聘Python工程师标准>>> 转载至:http://blog.sina.com.cn/s/blog_8564e55a01011fhw.html 最近做到了前 ...

vue cli js css压缩方案

vue cli js css压缩方案相关推荐

最新文章

热门文章