左小白的技术日常
Github

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

这篇文章发布于 2019/12/25,归类于
标签:
webpack-bundle-analyzerwebpack包体积优化
  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后再调用,弱网呢?怎么监听?这就需要了解懒加载的逻辑了,示例如下: ```html

    ```

    参考: import - JavaScript | MDN