webpack优化

cnd引入

有的时候我们不想将第三方的库打包，想借助于别人的cdn引入。这时就需要externals。
以引入jq为例（vue以及其他库都可以），以及依赖jq的第三方插件：

• cnd引入jq
• 配置全局,key是你需要require的，value是你的全局变量

externals: {
    jquery: 'window.$'
},

使用则直接 require 进来，反正 webpack 也不会把它打包进来。

var $ = require('jquery');

依赖jq的插件直接src引入即可。

谨慎引入第三方包

• 像jq这种库是否有引入的必要，http://youmightnotneedjquery.com/。
• 尽量模块化的引入(按需引入)。例如lodash。

import { debounce } from 'lodash'
import { throttle } from 'lodash'
// 改成如下写法
import debounce from 'lodash/debounce'
import throttle from 'lodash/throttle'

• 避免引入而不使用

异步加载组件（算vue项目的优化）

{
  path: '/somepath',
  component: function (resolve) {
    require(['./demos/somepath.vue'], resolve)
  }
}

异步加载模块

假如，你使用的是 Vue，将一个组件（以及其所有依赖）改为异步加载，所需要的只是把：

import scorerecord from '../views/scorerecord.vue'

改为如下写法:

const scorerecord = () => import('../views/scorerecord.vue')

如此分割之时，该组件所依赖的其他组件或其他模块，都会自动被分割进对应的 chunk 里，实现异步加载，当然也支持把组件按组分块，将同组中组件，打包在同个异步 chunk 中。如此能够非常有效的抑制 js包过大。