const CompressionWebpackPlugin = require('compression-webpack-plugin') new CompressionWebpackPlugin({ filename: '[path].gz[query]', algorithm: 'gzip', test: new RegExp( '\\.(' + ['js', 'css'].join('|') + ')$', ), threshold: 10240, minRatio: 0.8, }),
值得注意的是gzip压缩文件需要后端来配合支持，如果后端没有支持那么项目加载的依旧是没有压缩的文件。
去console插件
首先安装
cnpm install uglifyjs-webpack-plugin --save-dev
然后在configureWebpack里面配置它
const UglifyJsPlugin = require('uglifyjs-webpack-plugin') new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false, drop_debugger: true, drop_console: true, }, }, sourceMap: false, parallel: true, }),
cdn引入
有的同学说后端没有支持gzip压缩加载，那怎么办?那只有凉拌咯~~~。
这里给大家介绍一个cdn引入的方式，有的第三方插件太大，导致单独分包后还是挺大的，这个时候可以考虑用cdn的方式引入文件。
无插件引入cdn
首先我们不让webpack打包用cdn引入的文件
//对一些不经常改动的库，可以通过cdn引入，webpack不对他们打包 let externals = { 'vue': 'Vue', 'axios': 'axios', 'element-ui': 'ELEMENT', 'vue-router': 'VueRouter', 'vuex': 'Vuex', 'echarts': 'echarts', 'vue2-editor': 'VueEditor' }
然后配置cdn
const cdn = { css: [ //element-ui css 'https://unpkg.com/element-ui/lib/theme-chalk/index.css' ], js: [ //vue 'https://unpkg.com/vue@2.6.10/dist/vue.min.js', //axios 'http://cdn.staticfile.org/axios/0.19.0-beta.1/axios.min.js', //vuex 'https://unpkg.com/vuex@3.1.0/dist/vuex.min.js', //vue-router 'https://unpkg.com/vue-router@3.0.6/dist/vue-router.min.js', //element 'https://unpkg.com/element-ui@2.7.2/lib/index.js', //echarts 'https://cdn.jsdelivr.net/npm/echarts@4.2.1/dist/echarts.min.js', //vue2-editor "https://unpkg.com/vue2-editor@2.6.6/dist/vue2-editor.js" ] }
接下来在chainWebpack配置
process.env.VUE_APP_CURRENTMODE === 'production') { config.externals(externals)//忽略打包 config.plugin('html') .tap(args => { args[0].cdn = cdn; return args }) }
这里需要解释的是config.plugin('html')其实是运用了 html-webpack-plugin插件在其实例化的options挂载cdn对象，然后通过ejs模板语法，读取相关cdn。
紧接着我们需要在public/index.html中读取相关cdn
<% if (process.env.VUE_APP_CURRENTMODE === 'production') { %> <% for(var css of htmlWebpackPlugin.options.cdn.css) { %> <link href="https://www.jb51.net/<%=css%>" as="style"> <% } %> <% for(var js of htmlWebpackPlugin.options.cdn.js) { %> <script src="https://www.jb51.net/<%=js%>"></script> <% } %> <% } %>
至此cdn引入完成
插件引入cdn
由于手动引入cdn太过麻烦，而且担心版本变化，每次都需要手动去更改，所以为了更好的开发体验，引入了自动匹配cdn插件，webpack-cdn-plugin。接下来开始安装
cnpm install webpack-cdn-plugin --save
实例化插件
const cdnPlugin = require('webpack-cdn-plugin')
接下来开始在configureWebpack中引用
new cdnPlugin({ modules: [ { name: 'vue', var: 'Vue', path: 'dist/vue.min.js' }, { name: 'axios', var: 'axios', path: 'dist/axios.min.js' }, { name: 'vuex', var: 'Vuex', path: 'dist/vuex.min.js' }, { name: 'element-ui', var: 'ELEMENT', path: 'lib/index.js', style: 'lib/theme-chalk/index.css' }, { name: 'echarts', var: 'echarts', path: 'dist/echarts.min.js' }, { name: 'vue2-editor', var: 'VueEditor', path: 'dist/vue2-editor.js' }, { name: 'vue-router', var: 'VueRouter', path: 'dist/vue-router.min.js' }, ], publicPath: '/node_modules' })
name:插件名
var :项目中实例化的名字
path：路径名称
style:css路径名称
更多了解请参考官方文档。
总体来说引入第三方cdn确实能带来不错的效果，但是有可能不稳定，因此建议大家在实际开发中自己去申请一个专属的cdn域名，将网站所要用到库直接上传上去。