Chaoszhu'Blog

Appearance

HardSourceWebpackPlugin配置 ​

npm i -D hard-source-webpack-plugin

vue-cli配置 ​

配置方案一 ​

js
// vue.config.js
// 自定义参数参考：https://github.com/mzgoddard/hard-source-webpack-plugin
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
module.exports = {
  chainWebpack: (config) => {
      // 避免Jenkins构建工作空间出现缓存问题，建议加上环境判断，即只在本地开发构建时使用该插件
      if(process.env.NODE_ENV === 'development') {
         config.plugin('cache').use(HardSourceWebpackPlugin)   
      }
  },
  configureWebpack: {
    plugins: process.env.NODE_ENV === 'development' ? [
        new HardSourceWebpackPlugin.ExcludeModulePlugin([
          // 用到了环境变量的文件会被缓存起来，在本地开发时运行不同环境时可能遇到bug
          // 例如：在main.js中注入了环境变量，如果该文件没被更改且被缓存，则切换环境后运行，main.js中的环境不会变
          // 此时应忽略该文件；或者全局用到的环境变量在main.js中定义，然后忽略该文件的缓存
          { test: /src[\\/]main\.js/ },
        ])
      ] : []
  }
}

nuxt config 配置 ​

nuxt cli创建的项目内置hard-source插件，只需开启即可. 当然也可以使用环境判断.

部署打包采用docker构建，每次更新都会拉取node_modules，所以设置true跟false没啥区别

js
// nuxt.config.js
build: {
    hardSource: true
}

其他 ​

  1. 首次构建生成cache，速度不会提升
  1. 默认缓存位置：nodemodules/.cache（开发中出现莫名其妙的报错或者bug，删除该文件再尝试重新构建）
  1. ⁣缓存失效：两天后、小于50M、手动删除、更改了项目的配置文件(vue-cli已测试)
  1. 每次热更新会写入一次cache，所以会慢一丢丢