解决veu项目编译速度慢的问题

主要在热更新这一块解决。

 

step1：

安装依赖

npm install babel-plugin-dynamic-import-node

step2：

在webpack.prod.conf.js文件设置：

new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        drop_console: true,
        drop_debugger: true
      },
      sourceMap: true,
      ecma: 6,
      cache: true,
      parallel: true
    }),

step3：

在webpack.base.conf.js文件设置，排除node——modules：

module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        // include: [resolve('src'), resolve('test')]
        include: [resolve('src'), resolve('test')],
        exclude:/(node_modules)/ //主要这一句
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader?limit=8192',
        query: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader?name=fonts/[name].[md5:hash:hex:7].[ext]',
        options: {
          limit: 10000,
          name: utils.assetsPath('static/fonts/[name].[hash:7].[ext]')//0712
        }
      }
    ]
  },

step4：

在vue-loader文件中修改：

引入config/index.js文件中的变量

var utils = require('./utils')
var config = require('../config')
var isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: isProduction
      ? config.build.productionSourceMap
      : config.dev.cssSourceMap,
    extract: isProduction
  }),
  cacheBusting: config.dev.cacheBusting//引入config.dev.cacheBusting
}

在condig/index.js文件中引入增加一个变量：

cacheBusting: true

最后一步：

把babel文件中声明第一步中安装的plugin

{
  "presets": [
    ["env", { "modules": false }],
    "stage-2"
  ],
  "plugins": ["transform-runtime"],
  "comments": false,
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": [ "istanbul" ]
    },
    "development":{
      "plugins": [ "dynamic-import-node"]
    }
  },
  "compact": false
}