vue 打包优化分析 - Githubissues

教程优化版本内容是 vue cli2.x 版本

使用vue cli2.x 创建的项目可以通过,npm run build --report参数进行打包分析

cdn

新增一个cdn配置文件

//  externals.cdn.config.js
module.exports = {
      // 外部扩展，通过 cdn 引入，不会被 webpack 打包
     //  包名: 应用名
      externals: {
        'vue': 'Vue',
        'vue-router': 'VueRouter',
        'vuex': 'Vuex',
        'axios': 'axios',
       //  element-ui 可以不在排除范围
       'element-ui': 'ELEMENT'
      }
  }

index.html 添加cdn

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="renderer" content="webkit|ie-comp|ie-stand" />
    <meta http-equiv="X-UA-Compatible" content="chrome=1"/>
    <title>cdn 优化页面</title>
    <link rel="stylesheet" href="//unpkg.com/element-ui@2.3.2/lib/theme-chalk/index.css">
  </head>
  <body>
    <script type="text/javascript" src="/static/js/browser.tips.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="//unpkg.com/vue@2.5.2/dist/vue.js"></script>
    <script type="text/javascript" src="//unpkg.com/element-ui@2.3.2/lib/index.js"></script>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    </body>
</html>

但我觉得这些js库,使用cdn优化不打,建议配合webpack dll 插件把这些js打包成一个 dll.js 放到cdn会更加好

dll打包

资料: https://hacpai.com/article/1539364780380 webpack+vue-cli配置DllPlugin https://gitee.com/hishion.com/codes/fzm9lo0yd2ejr3v1abnkc95#%E6%9E%84%E5%BB%BA%E8%AF%B4%E6%98%8E 基于vue2.5和webpack3.8的配置及其优化实践 https://blog.seosiwei.com/detail/9 Webpack的dll功能 https://segmentfault.com/a/1190000005969643 提高webpack构建速度之DllPlugin与DllReferencePlugin的使用 https://www.jianshu.com/p/6fb08d492b59

yyman001 / blog

vue 打包优化分析 #64

教程优化版本内容是 vue cli2.x 版本

cdn

新增一个cdn配置文件

index.html 添加cdn

dll打包