cli3 项目从搭建优化到docker部署的方法(5)

日期：2020-12-13 栏目：程序人生浏览：次

// news/index.vue import Vue from 'vue' import newsMixin from '@/mixins/news-mixin' export default { name: 'news', mixins: [newsMixin], data () { return {} }, async created () { await this.NEWS_LIST() console.log(this.getNewsResponse) } }

6.2 扩展

除了封装 vuex 的公用方法，其实还有很多的东西也能做封装。例如：分页对象 , 表格数据 , 公用方法、等等就不一一举例了。可以看github

在多个地方经常使用，就可以考虑封装成 mixin ，不过请写好注释哦。不然就会有人在背后骂你了！！你懂的~~

7. 优化

7.1 gzip压缩

安装 compression-webpack-plugin 插件

npm install compression-webpack-plugin --save-dev // or yarn add compression-webpack-plugin --dev

在 vue.config.js 中添加配置

// vue.config.js const CompressionPlugin = require('compression-webpack-plugin') module.exports = { chainWebpack: config => { // 这里是对环境的配置，不同环境对应不同的BASE_URL，以便axios的请求地址不同 config.plugin('define').tap(args => { args[0]['process.env'].BASE_URL = JSON.stringify(process.env.BASE_URL) return args }) if (process.env.NODE_ENV === 'production') { // #region 启用GZip压缩 config .plugin('compression') .use(CompressionPlugin, { asset: '[path].gz[query]', algorithm: 'gzip', test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'), threshold: 10240, minRatio: 0.8, cache: true }) .tap(args => { }) // #endregion } } }

npm run build 后能看到生成 .gz 文件就OK了。如果你的服务器使用nginx的话，nginx也需要配置开启 GZIP 、下面会讲到如何在 nginx 中开启 GZIP

cli3 项目从搭建优化到docker部署的方法

7.2 第三方库引用cdn

对于 vue 、 vue-router 、 vuex 、 axios 和 element-ui 等等这些不经常改动的库、我们让 webpack 不对他们进行打包，通过 cdn 引入，可以减少代码的大小、也可以减少服务器的带宽，更能把这些文件缓存到客户端，客户端加载的会更快。

配置 vue.config.js

const CompressionPlugin = require('compression-webpack-plugin') module.exports = { chainWebpack: config => { // 省略其它代码 ······ // #region 忽略生成环境打包的文件 var externals = { vue: 'Vue', axios: 'axios', 'element-ui': 'ELEMENT', 'vue-router': 'VueRouter', vuex: 'Vuex' } config.externals(externals) const cdn = { css: [ // element-ui css '//unpkg.com/element-ui/lib/theme-chalk/index.css' ], js: [ // vue '//cdn.staticfile.org/vue/2.5.22/vue.min.js', // vue-router '//cdn.staticfile.org/vue-router/3.0.2/vue-router.min.js', // vuex '//cdn.staticfile.org/vuex/3.1.0/vuex.min.js', // axios '//cdn.staticfile.org/axios/0.19.0-beta.1/axios.min.js', // element-ui js '//unpkg.com/element-ui/lib/index.js' ] } config.plugin('html') .tap(args => { args[0].cdn = cdn return args }) // #endregion } } }

修改 index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width,initial-scale=1.0"> <link href="<%= BASE_URL %>favicon.ico"> <% if (process.env.NODE_ENV === 'production') { %> <% for(var css of htmlWebpackPlugin.options.cdn.css) { %> <link href="https://www.jb51.net/<%=css%>" as="style"> <link href="https://www.jb51.net/<%=css%>" as="style"> <% } %> <% for(var js of htmlWebpackPlugin.options.cdn.js) { %> <link href="https://www.jb51.net/<%=js%>" as="script"> <script src="https://www.jb51.net/<%=js%>"></script> <% } %> <% } %> <title>vue-cli3-project</title> </head> <body> <noscript> <strong>We're sorry but vue-cli3-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div></div>  </body> </html>

7.3 全站cdn

我们已经把第三方库使用 cdn 替代了，那么我们 build 后生成的 js , css 之类的文件能否也用 cdn 呢？

cli3 项目从搭建优化到docker部署的方法