项目优化上线第二部分！！第三方依赖启用CDN /vue.config.js module.exports = { pr

第三方依赖启用CDN

/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.when(process.env.NODE_ENV == "development", (config) => {
      config.entry("app").clear().add("./src/main-dev.js");
    });
  },
}



 路由部分的优化
 
 
 ### 路由懒加载

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

具体需要三步：

1.  安装 `@babel/plugin-syntax-dynamic-import`包
1.  在babel.config.js配置文件中声明该插件

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


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

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

 
 
 
 
 ### 开启gzip压缩

使用gzip减少文件体积，使传输速度更快

可以通过服务器端使用express做gzip压缩，其配置如下：

-   服务器端安装包 `npm i compression -D`
-   导入包 `const compression=require("compression");`
-   启用中间件 `app.use(compression())`

/app.js

const express=require("express") const compression=require("compression") const app=express()

app.use(compression()) //这个在前 app.use(express.static('./dist')) //这个在后

app.listen(80,()=>{ console.log("正在运行3000") })

![图片转存失败，建议将图片保存下来直接上传
        
 image.png(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ee06d74c2bb848f5bff91329ffd744ae~tplv-k3u1fbpfcp-watermark.image?)
]()```

 开启gzip压缩 开启gzip压缩

1 新建一个文件夹server 里面创建app.js文件 cmd在终端打开

2 窗口运行npm init -y 生成package.json文件

3 app.js文件配置上图所示将生成dist文件复制到server 4 终端输入dir查看文件目录

屏幕截图 2023-02-13 202157.png