webpack npm run dev 越来越慢 dll优化

前言

dll优化，在我自身体验中，我给放弃了。为什么要记录dll优化呢，也算是记录我的一次webpack 探索的过程，配置特别麻烦，一稍不注意就会导致各种错误。写文之前并不知道官方已经给抛弃了，一次次跳坑，在一次次爬坑。但是当我仔细想了一下 dll 的原理，发现也就是那么一会事儿，拿空间换时间，只不过配置复杂了一些。

npm run dev 很慢

之前一直使用，没觉得特别慢，后面加入的依赖越来越多，导致npm run dev特别慢，有时候长达10几秒。

当前使用的版本：
webpack ^3.6.0
node v10.13.0

然后网上搜索怎么才能优化使用起来快一些。

使用如下尝试优化配置

1 缩小文件搜索范围
webpack.base.conf.js 进行alias配置

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: { //设置别名,减少搜索范围
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

在vue文件中导入src某个文件，就可以使用如下方式了
import { searchDevices } from '@/api/device'
2 使用dll动态链接库优化

• 新增dll配置文件build/ webpack.dll.config.js ，把第三方库打包，因为第三方库不需要经常去更新，如果第三方库有更新的话，会重新更新打包

 const path = require ('path'), fs = require ('fs'), webpack = require ('webpack');

const vendors = [
  'vue',
  'vue-i18n',
  'axios',
  'vue-router',
  'vue-style-loader',
  'vuex',
  'echarts',
  'element-ui',
  'js-cookie',
  'mockjs',
  'screenfull'
];
module.exports = {
  entry: {
    vendors: vendors,
  },
  output: {
    path: path.resolve (__dirname, '../static/dll'),
    filename: '[name].dll.js', //打包文件的名字,
    library: '[name]_library',//这里需要和DllPlugin option.name 一致 可选 暴露出的全局变量名
  },
  plugins: [
    new webpack.DllPlugin ({
      path: path.resolve (__dirname, '../static/dll', 'manifest.json'),
      name: '[name]_library',
      context: __dirname, //必填，不然在web网页中找不到 '_dll_[name]'，会报错
    }),
  ],
};

• webpack.dev.conf.js 文件 plugins下面添加

new webpack.DllReferencePlugin ({ //dll_ _打包插件

 // context: __dirname,_

 context: path.resolve(__dirname, '..'), 

 manifest:require ('../static/dll/manifest.json')

 }),

• Index.html 引入dll.js

<script _src_="./static/dll/vendors.dll.js"></script>

然后npm run dev的时候发现时间确实变短了，
但是npm run build的时候，第三方包直接打包dll文件里，而且还没有压缩，文件达6m，建议发布的时候不使用dll 优化。

如果你有更好的优化插件，请一起讨论下吧。dll优化只是一种尝试，后来并没有采用到实际项目中。