1.vue ui 使用vue图形化管理工具打开项目仪表盘

#指令 vue ui

项目仪表盘.png

2.生成打包报告

"report": "vue-cli-service build --report"

点击仪表盘的任务会找到添加的report指令

report 选项可以生成 report.html 以帮助分析包内容

3. ElementUI组件按需加载

main-dev.js --------->开发环境用的入口文件

main-prod.js --------->生产环境用的入口文件

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

在index.html的头部区域中，通过CDN加载element-ui的js和css样式

<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.12/theme-chalk/index.min.css" rel="stylesheet">

<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.12/index.min.js"></script>

修改vue.config.js文件

设置变量isProd

在开发环境下，通过import来引入依赖。

在生产环境下，不使用import引入依赖，而是通过cdn来引入各种依赖，这样可以减小打包后依赖的体积

cdn引入

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({

  chainWebpack: (config) => {
    //生产模式
    config.when(process.env.NODE_ENV == "production", (config) => {
      config.entry("app").clear().add("./src/main-prod.js");
      
    	//设置一个全局变量，在index.html中用来区分生产环境和开发环境
      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;
      });
    });
  },
});

使用变量isProd

通过isProd区分开发环境和生产环境。如果是生产环境，则加载CDN。如果是开发环境，则不加载CDN文件。

修改index.html

<% if(htmlWebpackPlugin.options.isProd){%>
  <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.12/theme-chalk/index.min.css" rel="stylesheet">
  <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.12/index.min.js"></script>
  <% } %>

4.第三方依赖启用CDN

修改vue.config.js

        //生产模式
        config.when(process.env.NODE_ENV == "production", (config) => {
            config.entry("app").clear().add("./src/main-prod.js");
            //使用外部资源文件
            config.set("externals", {
                vue: "Vue",
                axios: "axios",
                lodash: "_",
                nprogress: "NProgress",
                "vue-quill-editor": "VueQuillEditor"
            });
            //设置一个全局变量，在index.html中用来区分生产环境和开发环境
            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;
            });
        });
    },

CDN链接

<% if(htmlWebpackPlugin.options.isProd){%>
  <link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
  <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.12/theme-chalk/index.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.2/axios.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.12/index.min.js"></script>

  <% } %>

5.路由懒加载

当打包创建项目时候，js包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了

安装 @babel/plugin-syntax-dynamic-import包

npm i @babel/plugin-syntax-dynamic-import

在babel.config.js配置文件中声明该插件

if(process.env.NODE_ENV=='production'){
    proPlugin.push('transform-remove-console')
}

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [...proPlugin, '@babel/plugin-syntax-dynamic-import'],
}

将路由改为按需加载的形式，示例代码如下：

                path: '/index',
                name: 'index',
                component: () => import(/* webpackChunkName: "ImportFuncDemo" */ '../views/IndexView.vue')

            }, {
                path: '/money',
                name: 'money',
                component: () => import(/* webpackChunkName: "ImportFuncDemo" */ '../views/MoneyView.vue')
            },
            {
                path: '/msg',
                name: 'msg',
                component: () => import(/* webpackChunkName: "ImportFuncDemo" */ '../views/UserMsgView.vue')
            }

6.项目打包

7.开启gzip压缩

创建一个sever文件夹
创建app.js文件
将打包的dist文件夹拖入
npm init -y初始化文件夹
下载express和compression依赖包
在app.js引入

const compression = require('compression')

const app = express()
app.use(compression())
app.use(express.static('./dist'))

app.listen(3000,()=>{
    console.log('服务器启动成功');
})

8.项目上线

打开宝塔控制面板
点击网站---->node项目---->添加node项目
在文件里面添加创建的sever文件夹

4. 在项目配置里面配置

端口号要与app.js里面设置的端口号相同如果不能访问在安全里面添加端口

重启网站

vue项目打包上线优化流程