Vue项目优化实践，通过CDN引入依赖项文件，减少打包vendor.js大小

在我们使用vue构建项目时，常有一个问题值得我们思考，我们该如何去减少我们打包出来的chunk大小？以下，是一个项目实例过程。

创建vue项目

npm init webpack vuepjt
           

在项目不进行任何配置时，直接build，让我们来看看打包出来的chunk大小

npm run build --report
           

咋一眼就发现vendor.js有120kb，让我们来看看为什么这个chunk这么大

大致分析一下，vendor.js这个chunk中vue,vue-router这两个库占用了90%以上的体积，vue占91kb，vue-router占27kb。于是我们如果尝试把vue和vue-router拆出来之后，chunk大小会怎样呢？

使用CDN加载资源文件

使用cdn引入vue和vue-router，这里有一些cdn地址，对于内部项目，建议使用内部cdn，避免出现未知异常。

bootstrap CDN：https://www.bootcdn.cn
Staticfile CDN：https://www.staticfile.org
jsDelivr CDN：https://www.jsdelivr.com
75 CDN：https://cdn.baomitu.com
UNPKG：https://unpkg.com
cdnjs：https://cdnjs.com
           

index.html引入vue.js vue-router.js

<!-- 引入Vue.js -->
<script src="https://cdn.staticfile.org/vue/2.5.2/vue.min.js"></script>
<!-- 引入vue-router -->
<script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
           

build/webpack.config.js在externals中配置外部的依赖项

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter'
  },
 
}
           

去掉项目中原有的引入

src/main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
// import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false
           

src/router/index.js

// import Vue from 'vue'
// import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(VueRouter)
export default new VueRouter({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})
           

继续build项目，之后我们再来查看一下chunk的大小

此时，vendor.js只有1kb。

诸如此类，可以对项目中引入的其他三方依赖进行处理，以此减少我们chunk的大小，提升加载速度。