关于前端: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优化只是一种尝试，起初并没有采纳到理论我的项目中。