文章目录

项目优化策略去除console插件，babel-plugin-transfrom-remove-console生成打包报告通过vue.config.js修改webpage的默认配置为项目创建不同的打包入口通过external加载外部的CDN资源通过CDN配置element-UI路由懒加载 项目上线1、通过node创建web服务器2、开启gzip配置3、配置HTTPS服务

项目优化策略

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

nprogress插件给项目网页加载加进度条=>挂载在拦截器中

去除console插件，babel-plugin-transfrom-remove-console

在babel.config.js中配置，并按需导入

// 项目开发阶段用到的babel插件 const prodPlugins = [] if (process.env.NODE_ENV === 'production') { prodPlugins.push('transform-remove-console') } module.exports = { 'presets': [ '@vue/cli-plugin-babel/preset' ], 'plugins': [ [ 'component', { 'libraryName': 'element-ui', 'styleLibraryName': 'theme-chalk' } ], // 发布产品时候的插件数组 ...prodPlugins, '@babel/plugin-syntax-dynamic-import' ] }

生成打包报告

1、命令行vue-cli-service build --report 2、通过可视化UI面板直接查看报告 在可视化UI面板中，通过控制台和分析面板，可以方便的看到项目中所存在的问题。

在报告中观察项目中比较大的模块，然后针对这些模块进行具体优化

通过vue.config.js修改webpage的默认配置

通过vue-cli3.0 工具生成的项目，默认隐藏了所有的webpage的配置项，目的是为了屏蔽项目的额配置过程，让程序员把工作的重心，放到具体的功能和业务具体实现上。 如果程序员需要修改webpage的默认配置需求，可以在项目的根目录中，按需创建vue.config.js这个配置文件，从而对项目的打包过程做自定义的配置。—怎么配置自己查

module.exports = { chainWebpack: config => { // 发布模式 config.when(process.env.NODE_ENV === 'production', config => { config .entry('app') .clear() .add('./src/main-prod.js') 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 }) }) } }

为项目创建不同的打包入口

默认情况下，vue项目的开发模式和发布模式共用一个打包的入口文件（src/main.js）。为了将项目的开发过程和发布过程分离，我们可以为两种模式设置各自的打包入口文件。 => 1、开发模式的入口文件为src/main-dev.js 2、发布模式的入口文件为src/main-prod.js

····································································································· 在vue.config.js的导出的配置对象中，新增configureWebpack和chainWebpack节点，来定义webpack的打包配置。

在这里，configureWebpack和chainWebpack的作用相同，唯一他们的区别就是他们修改webpack的方式不同： 1、chainWebpack通过链式编程的形式，来修改默认的webpack配置 2、configureWebpack通过操作对象的形式，来修改默认的webpack配置 具体去百度

通过chainwebpack自定义打包入口

module.exports = { chainWebpack: config => { // 发布模式 config.when(process.env.NODE_ENV === 'production', config => { config .entry('app') .clear() .add('./src/main-prod.js') 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 }) }) } }

通过external加载外部的CDN资源

默认情况下，通过import语法导入的第三方依赖包，最终会被打包合并到一个文件中，从而导致打包成功后，单文件体积过大的问题。

为了解决上述问题，可通过webpack的external节点，来配置并加载外部的CDN资源。凡是声明在external中的第三方依赖包，都不会被打包。

防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。

通过CDN配置element-UI

1、在main.js中注释掉按需加载的代码 2、在index.js中通过CDN加载

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>

路由懒加载

1、安装 ‘@babel/plugin-syntax-dynamic-import’ 2、在babel.config.js中声明该插件 3、

const Login = () => import(/* webpackChunkName: "Login_Home_Welcome" */ '../components/Login.vue') const Home = () => import(/* webpackChunkName: "Login_Home_Welcome" */ '../components/Home.vue') const Welcome = () => import(/* webpackChunkName: "Login_Home_Welcome" */ '../components/Welcome.vue') const Users = () => import(/* webpackChunkName: "Users_Rights_Roles" */ '../components/user/User.vue') const Rights = () => import(/* webpackChunkName: "Users_Rights_Roles" */ '../components/power/Rights.vue') const Roles = () => import(/* webpackChunkName: "Users_Rights_Roles" */ '../components/power/Roles.vue') const Cate = () => import(/* webpackChunkName: "Cate_Params" */ '../components/goods/Cate.vue') const Params = () => import(/* webpackChunkName: "Cate_Params" */ '../components/goods/Params.vue') const GoodsList = () => import(/* webpackChunkName: "GoodsList_Add" */ '../components/goods/List.vue') const Add = () => import(/* webpackChunkName: "GoodsList_Add" */ '../components/goods/Add.vue') const Order = () => import(/* webpackChunkName: "Order_Report" */ '../components/order/Order.vue') const Report = () => import(/* webpackChunkName: "Order_Report" */ '../components/report/Report.vue')

项目上线

1、通过node创建web服务器

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

const express=require('express'); const app=express(); app.use(express.static('./dist')); app.listen(80, console.log('server running at http://127.0.0.1') )

2、开启gzip配置

使用gzip可以减小文件体积，使传输速度更快。 可以通过服务端使用Express做文件压缩。其配置如下

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 http://127.0.0.1') )

3、配置HTTPS服务

传统的http是明文的，不安全采用HTTPS协议对传输的数据进行了加密处理，可以防止数据被中间人窃取，使用更安全

1、申请ssl证书freessl.cn 2、验证DNS（在域名管理后台添加TXT记录） 3、验证通过后，下载SSL证书（公匙，私匙） 4、在后台中配置

const express=require('express'); const compression=require('compression') const app=express(); app.use(compression()); app.use(express.static('./dist')); const https=require('https') const fs=require('fs') const key={publickey:fs.readFilesync(),privatekey:fs.readFilesync()} https.createServer(key,app).listen(443)

4、使用pm2插件管理应用

1、在服务器中安装 npm i pm2 -g 2、启动项目：pm2 start 脚本 --name 自定义名称 3、查看运行项目：pm2 ls 4、重启项目：pm2 restart 自定义名称