关于vue中性能优化在webpack中配置exexternals节点

1. 正常情况下，项目中的依赖包，例如 vue, vue-router, axios, lodash, echarts, nprogress 这样的包，都是直接从 node_modules 目录中打包进项目中，无形中增加了打包出来的文件的体积；
2. 为了减少打包出来的文件的体积，我们可以使用 webpack 提供的 externals 节点，把上述包配置成外联的形式；
3. 注意：被 externals 节点配置的包，不会被打包到最终的项目里，从而减少了打包完毕后项目的体积；

www.bootcdn.cn 这是html里找包的那个网站

1. externals 节点的配置步骤：
   1.打开 build 目录下的 webpack.prod.conf.js 文件，添加如下代码：
   externals: {
   // 包名: window全局对象,
   echarts: ‘echarts’,
   vue: ‘Vue’,
   ‘vue-router’: ‘VueRouter’,
   axios: ‘axios’,
   lodash: ‘_’,
   nprogress: ‘NProgress’
   }
   2.打开 index.html 首页，在头部header区域添加如下代码：
   < link rel=”stylesheet” href=”https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css”>
   < script src=”https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js”>< /script>
   < script src=”https://cdn.bootcss.com/echarts/4.1.0/echarts.min.js”>< /script>
   < script src=”https://cdn.bootcss.com/vue/2.5.16/vue.runtime.min.js”>< /script>
   < script src=”https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js”>< /script>
   < script src=”https://cdn.bootcss.com/axios/0.18.0/axios.min.js”>
   < script src=”https://cdn.bootcss.com/lodash.js/4.17.10/lodash.min.js”>< /script>

路由懒加载

1. 运行 npm i babel-plugin-syntax-dynamic-import -D
2. 在 .babelrc 的 plugins 节点下，新增如下插件配置：
   “babel-plugin-syntax-dynamic-import”

3. 把路由改造成懒加载形式：
   // 导入 登录组件
   // import Login from ‘@/components/Login’ 改造成如下格式：

   const Login = () => import(/* webpackChunkName: “login” */ ‘@/components/Login’)