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)$/
},
}