Vue-cli3.0打包优化实践
gzip压缩vue.config.jsnpm i --save-Dev compression-webpack-pluginconst CompressionWebpackPlugin = require('compression-webpack-plugin')const productionGzipExtensions = /\.(js|css|json|txt|htm...
·
- gzip压缩
vue.config.js
npm i --save-Dev compression-webpack-plugin
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
const plugins = []
plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: productionGzipExtensions,
threshold: 10240,
minRatio: 0.8
})
)
config.plugins = [...config.plugins, ...plugins]
}
}
}
nginx.conf
http{
gzip on;
gzip_static on;
gzip_buffers 4 16k;
gzip_comp_level 5;
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
}
2.去console插件
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_console: true,
drop_debugger: false,
pure_funcs: ['console.log'] //移除console
}
},
sourceMap: false,
parallel: true
})
)
3.去除多余无效的 css(测试后把我没写在scoped里面的样式好像删了。。。)
plugins.push(
new PurgecssPlugin({
paths: glob.sync([
path.join(__dirname, './src/index.html'),
path.join(__dirname, './**/*.vue'),
path.join(__dirname, './src/**/*.js')
])
})
)
4.cdn加载文件(打包的时候是小了几k,不知道怎么配开发环境)
vue,router,vuex,通过cdn导入,然后在各个文件里面加上
if(process.env.NODE_ENV === 'production'){
//vue.use(Router)
//vue.use(vuex)
}
config.externals: {
vue: "Vue",
vuex: "Vuex",
"vue-router": "VueRouter",
}
2019.3.12
更多推荐
已为社区贡献2条内容
所有评论(0)