vue项目优化与上线

一.项目优化策略

1.生成打包报告
2.第三方库启用CDN
3.Element-ui组件按需加载
4.首页内容定制
5.路由懒加载

1.生成打包报告 1.1通过vue-cli的UI面板直接查看 1.2通过命令行参数生成报告 // 生成report.html分析报告 vue-cli-service build --report 2.修改webpack配置

如果有修改webpack默认配置的需求，可以在项目根目录创建vue.config.js配置文件

2.1为开发模式与发布模式指定不同的打包入口 module.exports = { chainWebpack: config => { // 指定发布模式打包入口 config.when(process.env.NODE_ENV === 'production', config => { config .entry('app') .clear() .add('./src/main-prod.js') }) // 指定开发模式打包入口 config.when(process.env.NODE_ENV === 'development', config => { config .entry('app') .clear() .add('./src/main-dev.js') }) } } 2.2通过externals加载外部CDN资源

默认情况下，通过import导入的第三方依赖包最终会被打包合并到一个文件中，导致打包后单文件体积过大。所以我们需要通过webpack的externals节点，配置加载外部CDN资源，凡是声明在externals中的第三方依赖包都不会被打包。

配置vue.config.js文件

module.exports = { chainWebpack: config => { // 指定发布模式打包入口 config.when(process.env.NODE_ENV === 'production', config => { config .entry('app') .clear() .add('./src/main-prod.js') // 使用externals加载外部CDN资源 config.set('externals', { vue: 'Vue', 'vue-router': 'VueRouter', axios: 'axios', lodash: '_', echarts: 'echarts', nprogress: 'NProgress', 'vue-quill-editor': 'VueQuillEditor' }) }) // 指定开发模式打包入口 config.when(process.env.NODE_ENV === 'development', config => { config .entry('app') .clear() .add('./src/main-dev.js') }) } }

在public/index.html文件头部，添加第三方依赖包的js和css样式的CDN引用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MNWKI4Ry-1604394495531)(https://s1.ax1x.com/2020/11/03/Bsfrcj.png)]

3.通过CDN加载element-ui的组件

在main-prod.js中，注释掉element-ui按需加载的代码

// import './plugins/element.js'

在index.html头部，通过CDN加载element-ui的js和css

4.首页内容定制（看需求决定用不用）

不同打包环境下，首页内容页可能不同，可以通过插件进行配置

配置vue.config.js文件

module.exports = { chainWebpack: config => { // 指定发布模式打包入口 config.when(process.env.NODE_ENV === 'production', config => { config .entry('app') .clear() .add('./src/main-prod.js') // 使用externals加载外部CDN资源 config.set('externals', { vue: 'Vue', 'vue-router': 'VueRouter', axios: 'axios', lodash: '_', echarts: 'echarts', nprogress: 'NProgress', 'vue-quill-editor': 'VueQuillEditor' }) config.plugin('html').tap(args => { args[0].isProd = true return args }) }) // 指定开发模式打包入口 config.when(process.env.NODE_ENV === 'development', config => { config .entry('app') .clear() .add('./src/main-dev.js') config.plugin('html').tap(args => { args[0].isProd = false return args }) }) } }

在public/index.html中，根据isProd的值，决定如何渲染页面结构

<!- 按需渲染页面标题 --> <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>标题</title> <!- 按需加载外部CDN --> <% if(htmlWebpackPlugin.options.isProd){ %> <!- 通过externals加载的外部CDN资源 --> <% } %>

5.路由懒加载

当打包构建项目时，JavaScriot包会变得非常大，影响页面加载。所以我们将不同路由对应的组件分割成不同的代码块，当路由被访问时才加载对应组件。

安装插件包

开发依赖 @babel/plugin-syntax-dynamic-import

在babel.config.js中的plugins声明该插件

'@babel/plugin-syntax-dynamic-import'

将路由改为按需加载的形式

const Foo = () => import(/* webpackChunkName: "grounp-foo" */ './Foo.vue') const Bar = () => import(/* webpackChunkName: "grounp-foo" */ './Bar.vue') const Baz = () => import(/* webpackChunkName: "grounp-boo" */ './Baz.vue')

二.项目上线配置

1.通过node创建web服务器
2.开启gzip配置
3.配置https服务
4.使用pm2管理应用

1.通过node创建web服务器

创建node项目，并安装express,通过express快速创建web服务器，将vue打包生成的dist文件夹托管为静态资源即可。

npm init -y npm i express -S // 新建app.js const express = require('express') const app = express() app.use(express.static('./dist')) app.listen(80, () => { console.log('server running at ') }) 2.开启gzip配置

使用gzip可以减小文件体积，传输速度更快。

npm install compression -D const compression = require('compression') app.use(compression()) const express = require('express') const compression = require('compression') const app = express() // 一定要把这一行代码，写到 静态资源托管之前 app.use(compression()) app.use(express.static('./dist')) app.listen(80, () => { console.log('server running at ') }) 3.配置HTTPS服务（一般后端去做，了解即可）