vuecli3+webpack4優化實踐（刪除console.log和配置dllPlugin）

時間  2019-11-07
標籤 vuecli3+webpack4 vuecli webpack 優化 實踐 刪除 console.log console log 配置 dllplugin 简体版
原文   原文鏈接

本文主要介紹如何在vuecli3生成的項目中，打包輸出時刪除console.log和使用dllplugin，並記錄了配置過程當中踩到的坑。 （本人水平有限～但願你們多多指出有誤的地方）javascript

1、生產環境中刪除console.log

在開發代碼中寫的console.log，能夠經過配置webpack4中的terser-webpack-plugin插件達成目的，compress參數配置以下:html

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
              warnings: false,
              drop_console: true,
              drop_debugger: true,
              pure_funcs: ['console.log']
          },
        },
      }),
    ],
  },
};
複製代碼

而@vue/cli-service的配置源碼也是使用了terser-webpack-plugin插件進行Tree Shaking，如下是@vue/cli-service/prod.js的源碼vue

module.exports = (api, options) => {
  api.chainWebpack(webpackConfig => {
    if (process.env.NODE_ENV === 'production') {
      const isLegacyBundle = process.env.VUE_CLI_MODERN_MODE && !process.env.VUE_CLI_MODERN_BUILD
      const getAssetPath = require('../util/getAssetPath')
      const filename = getAssetPath(
        options,
        `js/[name]${isLegacyBundle ? `-legacy` : ``}${options.filenameHashing ? '.[contenthash:8]' : ''}.js`
      )

      webpackConfig
        .mode('production')
        .devtool(options.productionSourceMap ? 'source-map' : false)
        .output
          .filename(filename)
          .chunkFilename(filename)

      // keep module.id stable when vendor modules does not change
      webpackConfig
        .plugin('hash-module-ids')
          .use(require('webpack/lib/HashedModuleIdsPlugin'), [{
            hashDigest: 'hex'
          }])

      // disable optimization during tests to speed things up
      if (process.env.VUE_CLI_TEST) {
        webpackConfig.optimization.minimize(false)
      } else {
        const TerserPlugin = require('terser-webpack-plugin')
        const terserOptions = require('./terserOptions')
        webpackConfig.optimization.minimizer([
          new TerserPlugin(terserOptions(options))
        ])
      }
    }
  })
}
複製代碼

在 vue.config.js 中的 configureWebpack 選項提供一個對象會被 webpack-merge 合併入最終的 webpack 配置，所以vue-cli3構建的項目中只須要修改terserOptions便可，vue.config.js配置以下：java

module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  devServer: {
    port: 8080,
    https: false,
    hotOnly: true,
    disableHostCheck: true,
    open: true,
  },
  productionSourceMap: false, // 生產打包時不輸出map文件，增長打包速度
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer[0].options.terserOptions.compress.warnings = false
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
      config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true
      config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = ['console.log']
    }
  }
}
複製代碼

配置完成後使用 vue inspect --mode=production > output.js 命令審查項目的 webpack 配置，optimization.minimizer的輸出以下：node

optimization: {
    minimizer: [
      {
        options: {
          test: /\.m?js(\?.*)?$/i,
          chunkFilter: () => true,
          warningsFilter: () => true,
          extractComments: false,
          sourceMap: false,
          cache: true,
          cacheKeys: defaultCacheKeys => defaultCacheKeys,
          parallel: true,
          include: undefined,
          exclude: undefined,
          minify: undefined,
          terserOptions: {
            output: {
              comments: /^\**!|@preserve|@license|@cc_on/i
            },
            compress: {
              arrows: false,
              collapse_vars: false,
              comparisons: false,
              computed_props: false,
              hoist_funs: false,
              hoist_props: false,
              hoist_vars: false,
              inline: false,
              loops: false,
              negate_iife: false,
              properties: false,
              reduce_funcs: false,
              reduce_vars: false,
              switches: false,
              toplevel: false,
              typeofs: false,
              booleans: true,
              if_return: true,
              sequences: true,
              unused: true,
              conditionals: true,
              dead_code: true,
              evaluate: true,
              warnings: false, 
              drop_console: true, 
              drop_debugger: true, 
              pure_funcs: [
                'console.log'
              ]
            },
            mangle: {
              safari10: true
            }
          }
        }
      }
    ],
}
複製代碼

到此完成刪除console.log的配置，接下來記錄一下我踩到的坑～webpack

坑1：在vue.config.js中直接使用terser-webpack-plugin後，經過vue inpect審查發現新增的compress參數並無直接進入原有的terserOptions，而是minimizer數組新增了一個對象。這樣致使vue-cli原有的terser-webpack-plugin配置失效。打包會以cache和parallel爲false的配置下進行打包輸出，打包速度變慢，所以後來採起直接修改terserOptions。

minimizer數組新增了一個對象：git

options: {
  test: /\.m?js(\?.*)?$/i,
  chunkFilter: () => true,
  warningsFilter: () => true,
  extractComments: false,
  sourceMap: false,
  cache: false, 
  cacheKeys: defaultCacheKeys => defaultCacheKeys,
  parallel: false,
  include: undefined,
  exclude: undefined,
  minify: undefined,
  terserOptions: {
    output: {
      comments: /^\**!|@preserve|@license|@cc_on/i
    },
    compress: {
      warnings: false,
      drop_console: true,
      drop_debugger: true,
      pure_funcs: [
        'console.log'
      ]
    }
  }
}
複製代碼

坑2（未解決）：在給.eslintrc.js的rules配置了no-console的狀況下，修改代碼後的首次打包eslint-loader總會在終端上報 error: Unexpected console statement (no-console)，雖然打包過程當中報錯，可是最終的輸出代碼是沒有console.log的；(使用babel-plugin-transform-remove-console刪除console.log也會出現這種狀況)

查看@vue/cli-plugin-eslint的源碼發現eslint的cache屬性爲true，因此再次打包就不會對未修改的文件進行檢測。github

Eslint Node.js API對cache參數解釋以下：web

cache - Operate only on changed files (default: false). Corresponds to --cache.vue-router

cli-plugin-eslint使用eslint-loader的關鍵代碼以下：

api.chainWebpack(webpackConfig => {
      webpackConfig.resolveLoader.modules.prepend(path.join(__dirname, 'node_modules'))

      webpackConfig.module
        .rule('eslint')
          .pre()
          .exclude
            .add(/node_modules/)
            .add(require('path').dirname(require.resolve('@vue/cli-service')))
            .end()
          .test(/\.(vue|(j|t)sx?)$/)
          .use('eslint-loader')
            .loader('eslint-loader')
            .options({
              extensions,
              cache: true, 
              cacheIdentifier,
              emitWarning: options.lintOnSave !== 'error',
              emitError: options.lintOnSave === 'error',
              eslintPath: resolveModule('eslint', cwd) || require.resolve('eslint'),
              formatter:
                loadModule('eslint/lib/formatters/codeframe', cwd, true) ||
                require('eslint/lib/formatters/codeframe')
            })
    })
複製代碼

若是要終端不輸出eslint的錯誤，能夠在vue.config.js配置lintOnSave: process.env.NODE_ENV !== 'production'生產環境構建時禁用，可是這樣與在eslintrc.js的rules中配置'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off'的目的自相矛盾。

那麼是否有辦法讓eslint-loader在terser-webpack-plugin或者babel-plugin-transform-remove-console以後進行檢測呢？仍是說配置了刪除console.log就不必配置'no-console'呢？但願有大神能回答我這個疑惑！

2、使用dllPlugin優化打包速度

網上已經有不少文章介紹dllPlugin的使用方法，這裏就不介紹dllPlugin的詳細配置說明了。本文只介紹一下針對vue-cli3項目使用webapck-chain方式的配置代碼，因此就直接貼代碼啦～

新增webpack.dll.config.js，代碼以下：

const path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const webpack = require('webpack')

module.exports = {
  mode: 'production',
  entry: {
    vendor: ['vue/dist/vue.runtime.esm.js', 'vuex', 'vue-router', 'element-ui'],
    util: ['lodash']
  },
  output: {
    filename: '[name].dll.js',
    path: path.resolve(__dirname, 'dll'),
    library: 'dll_[name]'
  },
  plugins: [
    new CleanWebpackPlugin(), // clean-wepback-plugin目前已經更新到2.0.0，不須要傳參數path
    new webpack.DllPlugin({
      name: 'dll_[name]',
      path: path.join(__dirname, 'dll', '[name].manifest.json'),
      context: __dirname
    })
  ]
}
複製代碼

在vue.config.js添加DllReferencePlugin，最終代碼以下：

const webpack = require('webpack')
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
const path = require('path')

const dllReference = (config) => {
  config.plugin('vendorDll')
    .use(webpack.DllReferencePlugin, [{
      context: __dirname,
      manifest: require('./dll/vendor.manifest.json')
    }])

  config.plugin('utilDll')
    .use(webpack.DllReferencePlugin, [{
      context: __dirname,
      manifest: require('./dll/util.manifest.json')
    }])

  config.plugin('addAssetHtml')
    .use(AddAssetHtmlPlugin, [
      [
        {
          filepath: require.resolve(path.resolve(__dirname, 'dll/vendor.dll.js')),
          outputPath: 'dll',
          publicPath: '/dll'
        },
        {
          filepath: require.resolve(path.resolve(__dirname, 'dll/util.dll.js')),
          outputPath: 'dll',
          publicPath: '/dll'
        }
      ]
    ])
    .after('html')
}

module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  devServer: {
    port: 8080,
    https: false,
    hotOnly: true,
    disableHostCheck: true,
    open: true,
  },
  productionSourceMap: false, // 生產打包時不輸出map文件，增長打包速度
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      dllReference(config)
    }
  },
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer[0].options.terserOptions.compress.warnings = false
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
      config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true
      config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = ['console.log']
    }
  }
}
複製代碼

有3個地方須要說明一下：

一、webpack.dll.config.js文件中的entry.vendor使用'vue/dist/vue.runtime.esm.js'做爲vue的入口，是根據vue inspect > output.js的文件中resolve.alias決定的；（vue.runtime.esm.js仍是vue.esm.js取決於vue create構建時的選擇）

resolve: {
   alias: {
      '@': '/Users/saki_bc/bccgithub/vue-webpack-demo/src',
      vue$: 'vue/dist/vue.runtime.esm.js'
    },
}
複製代碼

二、在開發環境中不使用dllPlugin是由於chrome的vue devtool是不能檢測壓縮後的vue源碼，使得沒辦法用vue devtool觀察vue項目的組件和數據狀態；

三、add-asset-html-webpack-plugin插件必須在html-webpack-plugin以後使用，所以這裏要用webpack-chain來進行配置；至於爲何'html'表明html-webpack-plugin，是由於@vue/cli-servide/lib/config/app.js裏是用plugin('html')來映射的，關鍵源碼片斷以下：

const HTMLPlugin = require('html-webpack-plugin')
webpackConfig.plugin('html')
            .use(HTMLPlugin, [htmlOptions])
複製代碼

四、這裏不使用在index.html裏添加script標籤的方式引入dll文件，是由於當vue路由使用history模式，而且路由配置首頁重定向到其餘url的狀況下，在首頁刷新頁面後dll文件會以重定向後的url的根目錄引用，致使報錯找不到dll文件。 如：dll的正確引用狀況是http://www.xxx.com/vendor.dll.js，刷新重定向後變成 http://www.xxx.com/xxx/vendor.dll.js；即便在index.html使用絕對路徑也是會出現這樣的狀況，目前還不知道是否是html-webpack-plugin的bug；

結語

此次優化實踐仍然存在很多疑惑和且考慮的地方，webpack的更新發展也愈來愈快，vue-cli使用webpack-chain做爲核心方式也增長了很多學習成本，接下來還須要閱讀相關源碼，發現項目中配置不合理的地方～

也但願各位你們能分享一下使用webpack4過程當中踩到的坑～

相關文檔

webpack-chain文檔

add-asset-html-webpack-plugin文檔

vue-cli配置源碼

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程