乐趣区

关于前端:webpack-npm-run-dev-越来越慢-dll优化

jiezi
前言

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

退出移动版