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包過大。