webpack优化

1.在plugins加入webpack内置插件IgnorePlugin忽略部分三方包中不必要的依赖,如国际化的语言包,只保留需要用到的语言包,减少打包后的体积

  //忽略mometn中的locale文件夹
   webpack.IgnorePlugin(/\.\/locale/, /moment/)
  // 在配置文件中引入需要用到的语言包
  import 'moment/locale/zh-cn.js'
  //使用语言包
  moment.locale('zc-CN');

2.在module中加入noParse来防止 webpack 解析那些任何与给定正则表达式相匹配的文件。忽略的文件中不应该含有 import, require, define 的调用,或任何其他导入机制。忽略大型的 library 可以提高构建性能。

module.exports = {
  //...
  module: {
    noParse: /jquery|lodash/,
  }
};

vueCli3中看不到默认的配置文件,用户可以在vue.config.js中自定义配置,可通过

//查看生成配置文件
npx vue-cli-service inspect --mode production >> webpack.config.production.js
//查看开发配置文件
npx vue-cli-service inspect --mode development >> webpack.config.development.js

命令查看合并后的配置的文件内容,生成的配置文件会在当前项目的根目录中

//示例
//在vue.config.js中配置webpack内容
configureWebpack: (config) => {
      	//配置plugins节点
        config.plugins = config.plugins.concat([
            new webpack.IgnorePlugin(/\.\/locale/, /moment/),
        ])
        //配置module节点
        Object.assign(config.module, {
                noParse: /^(vue|vue-router|vuex|vuex-router-sync|moment|jquery)$/
    	},
    }
上一篇:使Element默认字体为中文


下一篇:CentOS 设置中文环境