webpack在打包中体积和速度上的一点优化

一、配置 resolve.modules

1，优化原理

（1）webpack 的 resolve.modules 是用来配置模块库（即 node_modules）所在的位置。当 js 里出现 import 'vue' 这样不是相对、也不是绝对路径的写法时，它便会到 node_modules 目录下去找。

（2）在默认配置下，webpack 会采用向上递归搜索的方式去寻找。但通常项目目录里只有一个 node_modules，且是在项目根目录。为了减少搜索范围，可我们以直接写明 node_modules 的全路径。

 

2，操作步骤

（1）打开 build/webpack.base.conf.js 文件，添加如下高亮配置：

module.exports = {
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    modules: [
      resolve('src'),
      resolve('node_modules')
    ],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

二、配置装载机的 include & exclude

1，优化原理

 Webpack 的装载机(loaders)，允许每个子项都可以有以下属性：

• test：必须满足的条件（正则表达式，不要加引号，匹配要处理的文件）
• exclude：不能满足的条件（排除不处理的目录）
• include：导入的文件将由加载程序转换的路径或文件数组（把要处理的目录包括进来）
• loader：一串“！”分隔的装载机（2.0版本以上，”-loader”不可以省略）
• loaders：作为字符串的装载器阵列

对于include，更精确指定要处理的目录，这可以减少不必要的遍历，从而减少性能损失。同样，对于已经明确知道的，不需要处理的目录，则应该予以排除，从而进一步提升性能。假设你有一个第三方组件的引用，它肯定位于node_modules，通常它将有一个 src 和一个 dist 目录。如果配置 Webpack 来排除 node_modules，那么它将从 dist 已经编译的目录中获取文件。否则会再次编译它们。故而，合理的设置 include & exclude，将会极大地提升 Webpack 打包优化速度

 

2，操作步骤

（1）打开 build/webpack.base.conf.js 文件，添加如下高亮配置：