前言

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