本地开发

参考链接01 参考链接02

1.优化开发体验的目的是为了提升开发时的效率，其中又可以分为以下几点

• 优化构建（即打包）速度

  在项目庞大时打包耗时可能会变的很长，每次等待打包的耗时加起来也会是个大数目

   - 缩小文件搜索范围；<br />           - 在配置 loader 时通过** include 或 exclude **属性去缩小命中范围；<br />           -  优化 **resolve** 配置：<br />               - 优化** resolve.modules** 配置，指明存放第三方模块的绝对路径，以减少寻找；<br />               - 优化** resolve.mainFields** 配置；<br />               - 优化** resolve.alias **配置；（给文件起别名）<br />               - 优化 **resolve.extensions** 配置（引入文件的时候就可以不用写后缀名了）<br />               - 优化** module.noParse** 配置<br />        - 使用** DllPlugin**（动态链接库）<br />        - 使用** HappyPack**（多进程并行处理）<br />        - 使用 **ParallelUglifyPlugin**

• 优化使用体验

  通过自动化手段完成一些重复的工作，让我们专注于解决问题本身

    - 使用 自动刷新（**搭建本地服务器**）<br />    使用 webpack 模块负责监听文件，webpack-dev-server 模块则负责刷新浏览器。<br />        - 开启  **HMR**

  1）优化打包速度

  打包速度指的是我们每次修改代码后热更新的速度以及发布前打包文件的速度

1-1）缩小文件搜索范围

1-1-1）在配置 loader 时通过 include或exclude 属性去缩小命中范围。

在使用 loader的时候，通过 include 或 exclude 来帮助我们避免不必要的转译，优化loader的管辖范围。

缓存babel编译过的文件：loader: ‘babel-loader?cacheDirectory=true’ 我们只需要为 loader 增加相应的参数设定。选择开启缓存将转译结果缓存至文件系统，则至少可以将 babel-loader 的工作效率提升两倍。

1-1-2）至 1-1-6）都是优化resolve的配置，其中配置 alias 、noParse 和 extensions 都是可以缩小文件的搜索范围的
1-1-2）优化 resolve.modules 配置，指明存放第三方模块的绝对路径，以减少寻找

1-1-3）优化 resolve.mainFields 配置；

1-1-4）优化 resolve.alias 配置；（给文件起别名）

当我们代码中出现 import ‘vue’时， webpack会采用向上递归搜索的方式去node_modules 目录下找。为了减少搜索范围我们可以直接告诉webpack去哪个路径下查找。也就是别名(alias)的配置。
在使用webpack打包项目时，可以在配置文件中配置resolve.alias来定义一些绝对路径，方便在项目中灵活使用路径，举例如下：

resolve: {
         extensions: [‘.js‘, ‘.vue‘],
         alias: {
             ‘@‘: path.resolve(__dirname, ‘src‘),
             ‘@scss‘: path.resolve(__dirname, ‘src‘, ‘scss‘),
            '@/common': path.join(process.cwd(), 'client/modules/common'),
         }
}

2、配置之后，引用会发生如下变化

// 相对路径引入
import hongAlert from ‘./../src/scss/test.less‘；
@import ‘./../common/styles/test.less‘；
// 配置后改写为绝对路径引入
import hongAlert from ‘@less/test.scss‘；
@import '~@/common/styles/test.less';

注意：scss和less文件使用绝对路径引入时，需要在引入路径前面加上‘~’，不然会报错，找不到对应路径；
波浪号是为了防止css-loader把@ 解析为相对路径

1-1-5）优化 resolve.extensions 配置（引入文件的时候就可以不用写后缀名了）

作用：webpack会根据extensions定义的后缀查找文件

在配置 resolve.extensions 时你需要遵守以下几点，以做到尽可能的优化构建性能：

• 后缀尝试列表要尽可能的小，不要把项目中不可能存在的情况写到后缀尝试列表中。
• 频率出现最高的文件后缀要优先放在最前面，以做到尽快的退出寻找过程。
• 在源码中写导入语句时，要尽可能的带上后缀，从而可以避免寻找过程。例如在你确定的情况下把 require(‘./data’) 写成 require(‘./data.json’)。

resolve: {
  //自动解析文件扩展名(补全文件后缀)(从左->右)
  // import hello from './hello' （!hello.js? -> !hello.vue? -> !hello.json）
  extensions: [".js", ".vue", ".json"],
}

1-1-6）优化 module.noParse 配置

当我们代码中使用到import jq from ‘jquery’时，webpack会去解析jq这个库是否有依赖其他的包。但是我们对类似jquery这类依赖库，一般会认为不会引用其他的包(特殊除外,自行判断)。增加noParse属性,告诉webpack不必解析，以此增加打包速度。

1-2）使用 DllPlugin（动态链接库）抽离第三方模块

1-3）使用 HappyPack（多进程并行处理）

在webpack构建过程中，实际上耗费时间大多数用在loader解析转换以及代码的压缩中。日常开发中我们需要使用Loader对js，css，图片，字体等文件做转换操作，并且转换的文件数据量也是非常大。由于js单线程的特性使得这些转换操作不能并发处理文件，而是需要一个个文件进行处理。HappyPack的基本原理是将这部分任务分解到多个子进程中去并行处理，子进程处理完成后把结果发送到主进程中，从而减少总的构建时间。

a.先安装

npm i -D happypack

b.在 webpack.config.js 文件中进行配置

1-4）使用 ParallelUglifyPlugin 增强代码压缩

上面对于loader转换已经做优化，那么下面还有另一个难点就是优化代码的压缩时间。

a.先安装

npm i -D webpack-parallel-uglify-plugin

b.在 webpack.config.js 文件中进行配置

1-5）配置缓存

1）loader 支持缓存的情况

我们每次执行构建都会把所有的文件都重复编译一遍，这样的重复工作是否可以被缓存下来呢，答案是可以的，目前大部分 loader 都提供了 cache 配置项。比如在 babel-loader 中，可以通过设置 cacheDirectory 来开启缓存，babel-loader?cacheDirectory=true 就会将每次的编译结果写进硬盘文件（默认是在项目根目录下的node_modules/.cache/babel-loader目录内，当然你也可以自定义）

2）loader 不支持缓存的情况

但如果 loader 不支持缓存呢？我们也有方法,我们可以通过cache-loader ，它所做的事情很简单，就是 babel-loader 开启 cache 后做的事情，将 loader 的编译结果写入硬盘缓存。再次构建会先比较一下，如果文件较之前的没有发生变化则会直接使用缓存。使用方法如官方 demo 所示，在一些性能开销较大的 loader 之前添加此 loader即可。

a.先安装

npm i -D cache-loader

b.在 webpack.config.js 文件中进行配置

2）优化开发时的使用体验

2-1） 使用 自动刷新（搭建本地服务器）

使用 webpack 模块负责监听文件，webpack-dev-server 模块则负责刷新浏览器。

2-2）开启 HMR