vue性能优化 - webpack包体积优化

1. 安装 webpack-bundle-analyzer npm包

# 安装包
npm install webpack-bundle-analyzer --save-dev

2. 在package.json的scripts加入对应的命令，运行npm run report 即可build，并在dist目录生成report.html，打开就可以各个模块包对应的大小，这样就可以开始优化了

scripts: {
  "report": "vue-cli-service build --report"
}

3. 路由都弄成懒加载，js懒加载可以使用import()，如果使用import xx from 'xx'，会直接打包到主包，就需要弄成懒加载的逻辑。但如果使用该js，怎么判断js已懒加载完？setTimeout 1s后再调用，弱网呢？怎么监听？这就需要了解懒加载的逻辑了，示例如下：

<!-- 监听是否加载完成 -->
<!-- 在浏览器中，import 语句只能在声明了 type="module" 的 script 的标签中使用。-->
<script type="module">
  let myModule = () => import('./testModule.js')
  
  // testModule.js   内容 export default { a: 1, b: "test" }

  // 类似于路由组件component懒加载逻辑。myModule仅是一个函数，返回promise，需要调用时 myModule().then() 即可
  window.onload = () => {
    console.log('onload')

    // dom已加载，3秒后加载模块
    setTimeout(() => {
      console.log(myModule, typeof myModule) // () => import('./testModule.js') "function"
      // myModule() 函数执行后，返回promise
      myModule().then((res) => {
        console.log('模块加载成功', res) // 加载成功 Module {Symbol(Symbol.toStringTag): "Module"}
        let data = res.default // {a: 1, b: "test"}
        console.log(data.a) // 1
      },(e) => {
        console.log('import 加载异常')
      })
    }, 3000)
  }
</script>

参考: import - JavaScript | MDN