直接打包

  • 运行npm run build

    • "build": "vue-cli-service build"

      生成打包报告

  • 需要再build 命令的代码后面加--report再执行打包

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

  • 查看打包报告

    • 在打包后的 dist 文件内 找到 report.html 文件 在浏览器运行

      优化打包速度

      在vue.config.js文件中，配置

    • productionSourceMap: false

      • 关闭生成sourcMap

    • 排除大文件

      1. // 排除大文件
      2. configureWebpack: {
      3. externals: {
      4. // js版本中window全局的成员名称
      5. // key是包名：value是window全局的成员名称
      6. vue: 'Vue',
      7.  'element-ui': 'ELEMENT',
      8.    echarts: 'echarts'
      9. }
      10. }

    • 未配置externals之前：

      • 凡是 import 导入的第三方模块，在最终打包完成后，会被合并到 chunk-vendors.js中
      • 缺点：导致单个文件的体积过大

    • 配置了 externals之后：

      • webpack 在进行打包时，会把 externals 节点下声明的第三方包排除在外
      • 因此最终打包生成的 js 文件中，不会包含 externals节点下的包
      • 好处：优化了打包后项目的体积。
      • 代码体积小，下载快，下载完执行 => 访问速度快，性能好

        在线CDN文件配置

    • 被排除大文件需要采用CDN的方式引入

    • CDN服务器：
      • 根据ip地址就近下载 => 很快
      • 下载有缓存
    • 根据环境变量动态设置配置
      • 开发环境（本机服务器）：npm run serve
        • 标识：process.env.NODE_ENV = 'development'
      • 生产环境（线上）：npm run build
        • 标识：process.env.NODE_ENV = 'production' ```javascript const { defineConfig } = require(‘@vue/cli-service’) let externals = {} let cdn = { js: [] } const isProduction = process.env.NODE_ENV === ‘production’ // 判断是否是生产环境 if (isProduction) { // 条件成立添加 排除文件与cdn链接 externals = { vue: ‘Vue’, ‘element-ui’: ‘ELEMENT’, echarts: ‘echarts’ } // js脚本链接 这里用到的是bootCDN(免费) cdn = { js: [ // vue js must at first! ‘https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js‘, // element-ui js ‘https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.8/index.min.js‘, // echarts js ‘https://cdn.bootcdn.net/ajax/libs/echarts/5.2.1/echarts.min.js‘ ] } } module.exports = defineConfig({ transpileDependencies: true, lintOnSave: true, // 动态判断是否关闭 SourceMap productionSourceMap: !isProduction, // 排除大文件 configureWebpack: { // 动态判断排除文件 externals // externals: { // // js版本中window全局的成员名称 // vue: ‘Vue’, // ‘element-ui’: ‘ELEMENT’, // echarts: ‘echarts’ // } }, chainWebpack (config) { // 注入cdn变量 (打包时会执行)，注入html中 config.plugin(‘html’).tap(args => { args[0].cdn = cdn // 配置cdn给插件 return args }) } })
  2.    - 配置完成之后需要在 页面中注入`public/index.html`
  3. ```javascript
  4. <body>
  5. <!-- 注入JS start -->
  6. <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
  7.   <script src="<%=js%>"></script>
  8. <% } %>
  9. <!-- 注入JS end -->
  10. </body>

本地预览

  • 设置资源访问路径为当前目录
    • publicPath: './'
    • 再次打包 npm run bulid

  • 安装 live Serve 插件

    • 在 dist 目录下的 index.html 右击 Open with Live Server

      路由懒加载（按需）

  • 没有懒加载的情况

    • 所有页面的代码都是一次性下载执行的
    • 第一次访问慢 以后会快 （浏览器有缓存）
  • 配置懒加载的情况
    • 访问某个页面的时候，才会下载执行对应页面的代码（按需）
    • 首次加载比没有配置快

懒加载语法：

  • component: () => import('组件路径')
    • 在路由中component配置
    • 访问该页面的时候会调用这个回调函数 ```javascript const routes = [ { path: ‘/login’, component: Login }, { path: ‘/reg’, component: Reg }, { path: ‘/‘, component: Layout, redirect: ‘/home’, // 子路由 children: [ // 路由懒加载 { path: ‘/home’, component: () => import(‘@/views/home’) }, ] } ]

```