#27 SplitChunks & Lodash & Vuetify tree shaking - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

加入 splitChunks

nuxt.config.js

module.exports = {
  build: {
    optimization: {
      splitChunks: {
        minSize: 10000,
        maxSize: 250000
這邊可以看到雖然總容量沒變，

但很明顯已經將 chunks 明確切分開來了，

一個 chunk 的容量更是沒有之前那麼大。
加入 LodashModuleReplacementPlugin
nuxt.config.js
請先 npm i -D lodash-webpack-plugin。
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
module.exports = {
  build: {
    extend(config, ctx) {
			config.plugins.unshift(new LodashModuleReplacementPlugin)
			// rules[2].use[0] is babel-loader
			config.module.rules[2].use[0].options.plugins = ['lodash']
和做過 splitChunks 的上圖作比較，

這邊已經將 lodash 做完 tree shaking，

因此已經看不到 24kb 左右的 lodash，

總容量減為 456.99kb。
加入 vuetify-loader
nuxt.config.js
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
module.exports = {
  build: {
    extractCSS: true,
    analyze: {
      analyzerMode: 'static'
    transpile: [/^vuetify/],
    extend(config, ctx) {
      config.plugins.push(
        new VuetifyLoaderPlugin()
再與上面比較，

容量最大的 vuetify(74kb) 已被拆掉散落於各地。

app.styl 的樣式也是被拆的不見蹤影，

總容量減為 401.75kb。
注意，部署時不能用 npm run analyze 模式哦，一定要用 npm run build
自己試試看就知道了，

執行 npm run analyze 時也會有提醒訊息。
本篇嚴格說起來算不上什麼優化，

只不過減少了一些專案大小，

還有更多優化的內容沒有完成，

我也在持續學習的路上，

歡迎對於更多效能優化上的建議與分享。
照慣例附上程式碼
027-tree-shaking-bundle-size
git clone -b 027-tree-shaking-bundle-size --single-branch https://github.com/hunterliu1003/blog.git
cd blog
npm install
npm run analyze
npm run build