如何通过vue-cli3搭建并优化Vue项目？
- 内容介绍
- 文章标签
- 相关推荐
本文共计3034个文字，预计阅读时间需要13分钟。
前言：github地址：https://github.com/LeeStaySmall/vue-project-demo（完整分支：optimize分支）demo地址：vue-project-demo.eloco.cn
安装与初始化架构：安装node=8.9（推荐：8.11.0）安装：npm install -g @vue/cli
前言
github地址： github.com/LeeStaySmall/vue-project-demo (完整分支：optimize分支)
demo地址： vue-project-demo.eloco.cn
安装与初始化架构
安装
node >= 8.9 推荐：8.11.0 +
安装： npm install -g @vue/cli
检查： vue --version
如果已安装旧版本，需要先 npm uninstall vue-cli -g 卸载掉旧版本。
初始化架构
创建： vue create project-name
注：项目名称不能驼峰命名。
选择一个预设（这里我选择更多功能）：
选择需要安装的（Babel、Router、Vuex、Pre-processors、Linter / Formatter）：
是否使用history路由模式（Yes）：
选择css 预处理器（Sass/SCSS）：
选择eslint 配置（ESLint + Standard config）：
选择什么时候执行eslint校验（Lint on save）：
选择以什么样的形式配置以上所选的功能（In dedicated config files）：
是否将之前的设置保存为一个预设模板（y）：
如果选择 y 会让输入名称，以便下次直接使用，否则直接开始初始化项目。
最后，看一下生成的基本架构目录：
在项目中优雅的使用svg 首先在 /src/components 创建 SvgIcon.vue ：
在 src/ 下创建 icons 文件夹，以及在其下创建 svg 文件夹用于存放svg文件，创建 index.js 作为入口文件：
编写index.js 的脚本：
import Vue from 'vue' import SvgIcon from '@/components/SvgIcon.vue' // svg组件 // 全局注册 Vue.component('svg-icon', SvgIcon) const requireAll = requireContext => requireContext.keys().map(requireContext) const req = require.context('./svg', false, /\.svg$/) requireAll(req)
使用 svg-sprite-loader 对项目中使用的 svg 进行处理：
npm install svg-sprite-loader --save-dev ；
修改默认的 webpack 配置， 在项目根目录创建 vue.config.js ，代码如下；
const path = require('path') function resolve(dir) { return path.join(__dirname, './', dir) } module.exports = { chainWebpack: config => { // svg loader const svgRule = config.module.rule('svg') // 找到svg-loader svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后 svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录 svgRule // 添加svg新的loader处理 .test(/\.svg$/) .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) // 修改images loader 添加svg处理 const imagesRule = config.module.rule('images') imagesRule.exclude.add(resolve('src/icons')) config.module .rule('images') .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/) } }
最后，在 main.js 中引入 import '@/icons' 即可；
// 使用示例 <svg-icon icon-class="add" />
PS：至于svg ，个人比较建议使用阿里开源的图标库iconFont
axios封装api、模块化vuex
axios篇
项目中安装 axios ： npm install axios ；
在 src 目录下创建 utils/ ， 并创建 request.js 用来封装 axios ，上代码：
import axios from 'axios' // 创建axios 实例 const service = axios.create({ baseURL: process.env.BASE_API, // api的base_url timeout: 10000 // 请求超时时间 }) // request 拦截器 service.interceptors.request.use( config => { // 这里可以自定义一些config 配置 return config }, error => { // 这里处理一些请求出错的情况 console.log(error) Promise.reject(error) } ) // response 拦截器 service.interceptors.response.use( response => { const res = response.data // 这里处理一些response 正常放回时的逻辑 return res }, error => { // 这里处理一些response 出错时的逻辑 return Promise.reject(error) } ) export default service
既然要使用 axios ，必不可少的需要配置环境变量以及需要请求的地址，这里可以简单的修改 poackage.json :
"scripts": { "dev": "vue-cli-service serve --project-mode dev", "test": "vue-cli-service serve --project-mode test", "pro": "vue-cli-service serve --project-mode pro", "pre": "vue-cli-service serve --project-mode pre", "build:dev": "vue-cli-service build --project-mode dev", "build:test": "vue-cli-service build --project-mode test", "build:pro": "vue-cli-service build --project-mode pro", "build:pre": "vue-cli-service build --project-mode pre", "build": "vue-cli-service build", "lint": "vue-cli-service lint" },
同时修改vue.config.js：
const path = require('path') function resolve(dir) { return path.join(__dirname, './', dir) } module.exports = { chainWebpack: config => { // 这里是对环境的配置，不同环境对应不同的BASE_API，以便axios的请求地址不同 config.plugin('define').tap(args => { const argv = process.argv const mode = argv[argv.indexOf('--project-mode') + 1] args[0]['process.env'].MODE = `"${mode}"` args[0]['process.env'].BASE_API = '"47.94.138.75:8000"' return args }) // svg loader const svgRule = config.module.rule('svg') // 找到svg-loader svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后 svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录 svgRule // 添加svg新的loader处理 .test(/\.svg$/) .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) // 修改images loader 添加svg处理 const imagesRule = config.module.rule('images') imagesRule.exclude.add(resolve('src/icons')) config.module .rule('images') .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/) } }
如何使用？ 我比较建议在 src/ 下创建 api 目录，用来统一管理所有的请求，比如下面这样： ‘'
这样的好处是方便管理、后期维护，还可以和后端的微服务对应，建立多文件存放不同模块的 api 。剩下的就是你使用到哪个api时，自己引入便可。
拓展：服务端的cors设置
牵涉到跨域，这里采用 cors ，很多朋友在面试中经常会被问到cors的实现原理，这个网上有很多理论大多是这样讲的：
其实，这样理解很抽象，服务器端到底是怎么做验证的？
这里大家可以通俗的理解为后端在接收前端的 request 请求的时候，会有一个 request 拦截器，像 axios response 拦截器一样。下面以 php lumen 框架为例，来深入理解一下这个流程：
<?php namespace App\Http\Middleware; use App\Http\Utils\Code; use Closure; use Illuminate\Http\Response; use Illuminate\Support\Facades\Log; class CorsMiddleware { private $headers; /** * 全局 ： 解决跨域 * @param $request * @param \Closure $next * @return mixed * @throws \HttpException */ public function handle($request, Closure $next) { //请求参数 Log::info('47.94.138.75', 'localhost', ]; $Origin = $request->header("Origin"); $this->headers = [ 'Access-Control-Allow-Headers' => 'Origin,x-token,Content-Type', 'Access-Control-Allow-Methods' => 'GET, POST, PUT, DELETE, OPTIONS', 'Access-Control-Allow-Credentials' => 'true',//允许客户端发送cookie 'Access-Control-Allow-Origin' => $Origin, //'Access-Control-Max-Age' => 120, //该字段可选，间隔2分钟验证一次是否允许跨域。 ]; //获取请求方式 if ($request->isMethod('options')) { if (in_array($Origin, $allowOrigin)) { return $this->setCorsHeaders(new Response(json_encode(['code' => Code::SUCCESS, "data" => 'success', "msg" => ""]), Code::SUCCESS)); } else { return new Response(json_encode('fail', 405)); } } $response = $next($request); //返回参数 Log::info('unpkg.com/element-ui/lib/theme-chalk/index.css', 'cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css' ], js: [] }, // 生产环境 build: { css: [ 'unpkg.com/element-ui/lib/theme-chalk/index.css', 'cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css' ], js: [ 'cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js', 'cdn.jsdelivr.net/npm/vue-router@3.0.1/dist/vue-router.min.js', 'cdn.jsdelivr.net/npm/vuex@3.0.1/dist/vuex.min.js', 'cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js', 'unpkg.com/element-ui/lib/index.js', 'cdn.bootcss.com/js-cookie/2.2.0/js.cookie.min.js', 'cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js' ] } } module.exports = { chainWebpack: config => { // 这里是对环境的配置，不同环境对应不同的BASE_API，以便axios的请求地址不同 config.plugin('define').tap(args => { const argv = process.argv const mode = argv[argv.indexOf('--project-mode') + 1] args[0]['process.env'].MODE = `"${mode}"` args[0]['process.env'].BASE_API = '"47.94.138.75:8000"' return args }) /** * 添加CDN参数到htmlWebpackPlugin配置中， 详见public/index.html 修改 */ config.plugin('html').tap(args => { if (process.env.NODE_ENV === 'production') { args[0].cdn = cdn.build } if (process.env.NODE_ENV === 'development') { args[0].cdn = cdn.dev } return args }) // svg loader const svgRule = config.module.rule('svg') // 找到svg-loader svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后 svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录 svgRule // 添加svg新的loader处理 .test(/\.svg$/) .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) // 修改images loader 添加svg处理 const imagesRule = config.module.rule('images') imagesRule.exclude.add(resolve('src/icons')) config.module .rule('images') .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/) }, // 修改webpack config, 使其不打包externals下的资源 configureWebpack: config => { const myConfig = {} if (process.env.NODE_ENV === 'production') { // 1. 生产环境npm包转CDN myConfig.externals = externals } if (process.env.NODE_ENV === 'development') { /** * 关闭host check，方便使用ngrok之类的内网转发工具 */ myConfig.devServer = { disableHostCheck: true } } // open: true, // hot: true // // 47.94.138.75', // // // changeOrigin: true, // // pathRewrite: { // // '^/proxy': '' // // } // // } // // }, // } return myConfig } }
最后去除 main.js 中引入的 import 'element-ui/lib/theme-chalk/index.css'
OK ，现在执行一下 build ：
可以看到，相对于 793.20KB ， 61.94k 小了将近 13 倍！！！
把这个分支部署到服务器，话不多说，对比一下就好：
使用Gzip 加速
引入 compression-webpack-plugin : npm i -D compression-webpack-plugin www.webpackjs.com/plugins/compression-webpack-plugin/
修改 vue.config.js ，老规矩，上最全的代码：
const path = require('path') const CompressionWebpackPlugin = require('compression-webpack-plugin') function resolve(dir) { return path.join(__dirname, './', dir) } // cdn预加载使用 const externals = { 'vue': 'Vue', 'vue-router': 'VueRouter', 'vuex': 'Vuex', 'axios': 'axios', 'element-ui': 'ELEMENT', 'js-cookie': 'Cookies', 'nprogress': 'NProgress' } const cdn = { // 开发环境 dev: { css: [ 'unpkg.com/element-ui/lib/theme-chalk/index.css', 'cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css' ], js: [] }, // 生产环境 build: { css: [ 'unpkg.com/element-ui/lib/theme-chalk/index.css', 'cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css' ], js: [ 'cdn.bootcss.com/vue/2.5.21/vue.min.js', 'cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js', 'cdn.bootcss.com/vuex/3.0.1/vuex.min.js', 'cdn.bootcss.com/axios/0.18.0/axios.min.js', 'unpkg.com/element-ui/lib/index.js', 'cdn.bootcss.com/js-cookie/2.2.0/js.cookie.min.js', 'cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js' ] } } // 是否使用gzip const productionGzip = true // 需要gzip压缩的文件后缀 const productionGzipExtensions = ['js', 'css'] module.exports = { chainWebpack: config => { // 这里是对环境的配置，不同环境对应不同的BASE_API，以便axios的请求地址不同 config.plugin('define').tap(args => { const argv = process.argv const mode = argv[argv.indexOf('--project-mode') + 1] args[0]['process.env'].MODE = `"${mode}"` args[0]['process.env'].BASE_API = '"47.94.138.75:8000"' return args }) /** * 添加CDN参数到htmlWebpackPlugin配置中， 详见public/index.html 修改 */ config.plugin('html').tap(args => { if (process.env.NODE_ENV === 'production') { args[0].cdn = cdn.build } if (process.env.NODE_ENV === 'development') { args[0].cdn = cdn.dev } return args }) // svg loader const svgRule = config.module.rule('svg') // 找到svg-loader svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后 svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录 svgRule // 添加svg新的loader处理 .test(/\.svg$/) .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) // 修改images loader 添加svg处理 const imagesRule = config.module.rule('images') imagesRule.exclude.add(resolve('src/icons')) config.module .rule('images') .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/) }, // 修改webpack config, 使其不打包externals下的资源 configureWebpack: config => { const myConfig = {} if (process.env.NODE_ENV === 'production') { // 1. 生产环境npm包转CDN myConfig.externals = externals myConfig.plugins = [] // 2. 构建时开启gzip，降低服务器压缩对CPU资源的占用，服务器也要相应开启gzip productionGzip && myConfig.plugins.push( new CompressionWebpackPlugin({ test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), threshold: 8192, minRatio: 0.8 }) ) } if (process.env.NODE_ENV === 'development') { /** * 关闭host check，方便使用ngrok之类的内网转发工具 */ myConfig.devServer = { disableHostCheck: true } } // open: true, // hot: true // // 47.94.138.75', // // // changeOrigin: true, // // pathRewrite: { // // '^/proxy': '' // // } // // } // // }, // } return myConfig } }
再次运行 build ，我们会发现 dist/ 下所有的 .js 和 .css 都会多出一个 .js.gz、.css.gz 的文件，这就是我们需要的压缩文件，可以看到最大的只有 18.05KB ，想想是不是比较激动...
当然，这玩意还需要服务端支持，也就是配置 nginx ：
gzip on; gzip_static on; gzip_min_length 1024; gzip_buffers 4 16k; gzip_comp_level 2; gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml; gzip_vary off; gzip_disable "MSIE [1-6]\.";
配置完重启 nginx ：
配置成功的话，可以看到加载的是比较小的 Gzip ：
在 response headers 里会有一个 Content-Encoding:gzip
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。
本文共计3034个文字，预计阅读时间需要13分钟。
前言：github地址：https://github.com/LeeStaySmall/vue-project-demo（完整分支：optimize分支）demo地址：vue-project-demo.eloco.cn
安装与初始化架构：安装node=8.9（推荐：8.11.0）安装：npm install -g @vue/cli
前言
github地址： github.com/LeeStaySmall/vue-project-demo (完整分支：optimize分支)
demo地址： vue-project-demo.eloco.cn
安装与初始化架构
安装
node >= 8.9 推荐：8.11.0 +
安装： npm install -g @vue/cli
检查： vue --version
如果已安装旧版本，需要先 npm uninstall vue-cli -g 卸载掉旧版本。
初始化架构
创建： vue create project-name
注：项目名称不能驼峰命名。
选择一个预设（这里我选择更多功能）：
选择需要安装的（Babel、Router、Vuex、Pre-processors、Linter / Formatter）：
是否使用history路由模式（Yes）：
选择css 预处理器（Sass/SCSS）：
选择eslint 配置（ESLint + Standard config）：
选择什么时候执行eslint校验（Lint on save）：
选择以什么样的形式配置以上所选的功能（In dedicated config files）：
是否将之前的设置保存为一个预设模板（y）：
如果选择 y 会让输入名称，以便下次直接使用，否则直接开始初始化项目。
最后，看一下生成的基本架构目录：
在项目中优雅的使用svg 首先在 /src/components 创建 SvgIcon.vue ：
在 src/ 下创建 icons 文件夹，以及在其下创建 svg 文件夹用于存放svg文件，创建 index.js 作为入口文件：
编写index.js 的脚本：
import Vue from 'vue' import SvgIcon from '@/components/SvgIcon.vue' // svg组件 // 全局注册 Vue.component('svg-icon', SvgIcon) const requireAll = requireContext => requireContext.keys().map(requireContext) const req = require.context('./svg', false, /\.svg$/) requireAll(req)
使用 svg-sprite-loader 对项目中使用的 svg 进行处理：
npm install svg-sprite-loader --save-dev ；
修改默认的 webpack 配置， 在项目根目录创建 vue.config.js ，代码如下；
const path = require('path') function resolve(dir) { return path.join(__dirname, './', dir) } module.exports = { chainWebpack: config => { // svg loader const svgRule = config.module.rule('svg') // 找到svg-loader svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后 svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录 svgRule // 添加svg新的loader处理 .test(/\.svg$/) .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) // 修改images loader 添加svg处理 const imagesRule = config.module.rule('images') imagesRule.exclude.add(resolve('src/icons')) config.module .rule('images') .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/) } }
最后，在 main.js 中引入 import '@/icons' 即可；
// 使用示例 <svg-icon icon-class="add" />
PS：至于svg ，个人比较建议使用阿里开源的图标库iconFont
axios封装api、模块化vuex
axios篇
项目中安装 axios ： npm install axios ；
在 src 目录下创建 utils/ ， 并创建 request.js 用来封装 axios ，上代码：
import axios from 'axios' // 创建axios 实例 const service = axios.create({ baseURL: process.env.BASE_API, // api的base_url timeout: 10000 // 请求超时时间 }) // request 拦截器 service.interceptors.request.use( config => { // 这里可以自定义一些config 配置 return config }, error => { // 这里处理一些请求出错的情况 console.log(error) Promise.reject(error) } ) // response 拦截器 service.interceptors.response.use( response => { const res = response.data // 这里处理一些response 正常放回时的逻辑 return res }, error => { // 这里处理一些response 出错时的逻辑 return Promise.reject(error) } ) export default service
既然要使用 axios ，必不可少的需要配置环境变量以及需要请求的地址，这里可以简单的修改 poackage.json :
"scripts": { "dev": "vue-cli-service serve --project-mode dev", "test": "vue-cli-service serve --project-mode test", "pro": "vue-cli-service serve --project-mode pro", "pre": "vue-cli-service serve --project-mode pre", "build:dev": "vue-cli-service build --project-mode dev", "build:test": "vue-cli-service build --project-mode test", "build:pro": "vue-cli-service build --project-mode pro", "build:pre": "vue-cli-service build --project-mode pre", "build": "vue-cli-service build", "lint": "vue-cli-service lint" },
同时修改vue.config.js：
const path = require('path') function resolve(dir) { return path.join(__dirname, './', dir) } module.exports = { chainWebpack: config => { // 这里是对环境的配置，不同环境对应不同的BASE_API，以便axios的请求地址不同 config.plugin('define').tap(args => { const argv = process.argv const mode = argv[argv.indexOf('--project-mode') + 1] args[0]['process.env'].MODE = `"${mode}"` args[0]['process.env'].BASE_API = '"47.94.138.75:8000"' return args }) // svg loader const svgRule = config.module.rule('svg') // 找到svg-loader svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后 svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录 svgRule // 添加svg新的loader处理 .test(/\.svg$/) .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) // 修改images loader 添加svg处理 const imagesRule = config.module.rule('images') imagesRule.exclude.add(resolve('src/icons')) config.module .rule('images') .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/) } }
如何使用？ 我比较建议在 src/ 下创建 api 目录，用来统一管理所有的请求，比如下面这样： ‘'
这样的好处是方便管理、后期维护，还可以和后端的微服务对应，建立多文件存放不同模块的 api 。剩下的就是你使用到哪个api时，自己引入便可。
拓展：服务端的cors设置
牵涉到跨域，这里采用 cors ，很多朋友在面试中经常会被问到cors的实现原理，这个网上有很多理论大多是这样讲的：
其实，这样理解很抽象，服务器端到底是怎么做验证的？
这里大家可以通俗的理解为后端在接收前端的 request 请求的时候，会有一个 request 拦截器，像 axios response 拦截器一样。下面以 php lumen 框架为例，来深入理解一下这个流程：
<?php namespace App\Http\Middleware; use App\Http\Utils\Code; use Closure; use Illuminate\Http\Response; use Illuminate\Support\Facades\Log; class CorsMiddleware { private $headers; /** * 全局 ： 解决跨域 * @param $request * @param \Closure $next * @return mixed * @throws \HttpException */ public function handle($request, Closure $next) { //请求参数 Log::info('47.94.138.75', 'localhost', ]; $Origin = $request->header("Origin"); $this->headers = [ 'Access-Control-Allow-Headers' => 'Origin,x-token,Content-Type', 'Access-Control-Allow-Methods' => 'GET, POST, PUT, DELETE, OPTIONS', 'Access-Control-Allow-Credentials' => 'true',//允许客户端发送cookie 'Access-Control-Allow-Origin' => $Origin, //'Access-Control-Max-Age' => 120, //该字段可选，间隔2分钟验证一次是否允许跨域。 ]; //获取请求方式 if ($request->isMethod('options')) { if (in_array($Origin, $allowOrigin)) { return $this->setCorsHeaders(new Response(json_encode(['code' => Code::SUCCESS, "data" => 'success', "msg" => ""]), Code::SUCCESS)); } else { return new Response(json_encode('fail', 405)); } } $response = $next($request); //返回参数 Log::info('unpkg.com/element-ui/lib/theme-chalk/index.css', 'cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css' ], js: [] }, // 生产环境 build: { css: [ 'unpkg.com/element-ui/lib/theme-chalk/index.css', 'cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css' ], js: [ 'cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js', 'cdn.jsdelivr.net/npm/vue-router@3.0.1/dist/vue-router.min.js', 'cdn.jsdelivr.net/npm/vuex@3.0.1/dist/vuex.min.js', 'cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js', 'unpkg.com/element-ui/lib/index.js', 'cdn.bootcss.com/js-cookie/2.2.0/js.cookie.min.js', 'cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js' ] } } module.exports = { chainWebpack: config => { // 这里是对环境的配置，不同环境对应不同的BASE_API，以便axios的请求地址不同 config.plugin('define').tap(args => { const argv = process.argv const mode = argv[argv.indexOf('--project-mode') + 1] args[0]['process.env'].MODE = `"${mode}"` args[0]['process.env'].BASE_API = '"47.94.138.75:8000"' return args }) /** * 添加CDN参数到htmlWebpackPlugin配置中， 详见public/index.html 修改 */ config.plugin('html').tap(args => { if (process.env.NODE_ENV === 'production') { args[0].cdn = cdn.build } if (process.env.NODE_ENV === 'development') { args[0].cdn = cdn.dev } return args }) // svg loader const svgRule = config.module.rule('svg') // 找到svg-loader svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后 svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录 svgRule // 添加svg新的loader处理 .test(/\.svg$/) .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) // 修改images loader 添加svg处理 const imagesRule = config.module.rule('images') imagesRule.exclude.add(resolve('src/icons')) config.module .rule('images') .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/) }, // 修改webpack config, 使其不打包externals下的资源 configureWebpack: config => { const myConfig = {} if (process.env.NODE_ENV === 'production') { // 1. 生产环境npm包转CDN myConfig.externals = externals } if (process.env.NODE_ENV === 'development') { /** * 关闭host check，方便使用ngrok之类的内网转发工具 */ myConfig.devServer = { disableHostCheck: true } } // open: true, // hot: true // // 47.94.138.75', // // // changeOrigin: true, // // pathRewrite: { // // '^/proxy': '' // // } // // } // // }, // } return myConfig } }
最后去除 main.js 中引入的 import 'element-ui/lib/theme-chalk/index.css'
OK ，现在执行一下 build ：
可以看到，相对于 793.20KB ， 61.94k 小了将近 13 倍！！！
把这个分支部署到服务器，话不多说，对比一下就好：
使用Gzip 加速
引入 compression-webpack-plugin : npm i -D compression-webpack-plugin www.webpackjs.com/plugins/compression-webpack-plugin/
修改 vue.config.js ，老规矩，上最全的代码：
const path = require('path') const CompressionWebpackPlugin = require('compression-webpack-plugin') function resolve(dir) { return path.join(__dirname, './', dir) } // cdn预加载使用 const externals = { 'vue': 'Vue', 'vue-router': 'VueRouter', 'vuex': 'Vuex', 'axios': 'axios', 'element-ui': 'ELEMENT', 'js-cookie': 'Cookies', 'nprogress': 'NProgress' } const cdn = { // 开发环境 dev: { css: [ 'unpkg.com/element-ui/lib/theme-chalk/index.css', 'cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css' ], js: [] }, // 生产环境 build: { css: [ 'unpkg.com/element-ui/lib/theme-chalk/index.css', 'cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css' ], js: [ 'cdn.bootcss.com/vue/2.5.21/vue.min.js', 'cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js', 'cdn.bootcss.com/vuex/3.0.1/vuex.min.js', 'cdn.bootcss.com/axios/0.18.0/axios.min.js', 'unpkg.com/element-ui/lib/index.js', 'cdn.bootcss.com/js-cookie/2.2.0/js.cookie.min.js', 'cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js' ] } } // 是否使用gzip const productionGzip = true // 需要gzip压缩的文件后缀 const productionGzipExtensions = ['js', 'css'] module.exports = { chainWebpack: config => { // 这里是对环境的配置，不同环境对应不同的BASE_API，以便axios的请求地址不同 config.plugin('define').tap(args => { const argv = process.argv const mode = argv[argv.indexOf('--project-mode') + 1] args[0]['process.env'].MODE = `"${mode}"` args[0]['process.env'].BASE_API = '"47.94.138.75:8000"' return args }) /** * 添加CDN参数到htmlWebpackPlugin配置中， 详见public/index.html 修改 */ config.plugin('html').tap(args => { if (process.env.NODE_ENV === 'production') { args[0].cdn = cdn.build } if (process.env.NODE_ENV === 'development') { args[0].cdn = cdn.dev } return args }) // svg loader const svgRule = config.module.rule('svg') // 找到svg-loader svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后 svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录 svgRule // 添加svg新的loader处理 .test(/\.svg$/) .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) // 修改images loader 添加svg处理 const imagesRule = config.module.rule('images') imagesRule.exclude.add(resolve('src/icons')) config.module .rule('images') .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/) }, // 修改webpack config, 使其不打包externals下的资源 configureWebpack: config => { const myConfig = {} if (process.env.NODE_ENV === 'production') { // 1. 生产环境npm包转CDN myConfig.externals = externals myConfig.plugins = [] // 2. 构建时开启gzip，降低服务器压缩对CPU资源的占用，服务器也要相应开启gzip productionGzip && myConfig.plugins.push( new CompressionWebpackPlugin({ test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), threshold: 8192, minRatio: 0.8 }) ) } if (process.env.NODE_ENV === 'development') { /** * 关闭host check，方便使用ngrok之类的内网转发工具 */ myConfig.devServer = { disableHostCheck: true } } // open: true, // hot: true // // 47.94.138.75', // // // changeOrigin: true, // // pathRewrite: { // // '^/proxy': '' // // } // // } // // }, // } return myConfig } }
再次运行 build ，我们会发现 dist/ 下所有的 .js 和 .css 都会多出一个 .js.gz、.css.gz 的文件，这就是我们需要的压缩文件，可以看到最大的只有 18.05KB ，想想是不是比较激动...
当然，这玩意还需要服务端支持，也就是配置 nginx ：
gzip on; gzip_static on; gzip_min_length 1024; gzip_buffers 4 16k; gzip_comp_level 2; gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml; gzip_vary off; gzip_disable "MSIE [1-6]\.";
配置完重启 nginx ：
配置成功的话，可以看到加载的是比较小的 Gzip ：
在 response headers 里会有一个 Content-Encoding:gzip
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。