mpvue——引入echarts打包vendor过大

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

前言

有一个项目需要引入图表，当时有两种选择一种是mpvue-echarts，一种是F2，而我经过踩坑之后依然决然的选择了mpvue-echarts，简单快捷容易上手，主要之前用过比较熟悉。

问题 | 解决

引入后突然发现，打包的时候出问题了，vendor太大了！看了引入的才发现引入的echarts太大了，然后换成了压缩版的！

import * as echarts from 'echarts/dist/echarts.min'

引入后再打包少了2M左右但是还是大啊,查看了webpack后发现,因为是开发环境,所以没进行UglifyJs压缩,所以解决的方法来了,引入UglifyJs插件

修改build目录下的webpack.dev.conf.js配置文件

var UglifyJsPlugin = require('uglifyjs-webpack-plugin')

new UglifyJsPlugin({

      sourceMap: true

    })

完整配置

/*

 * @Author: wangyang

 * @LastEditors: wangyang

 * @Description: file content

 * @Date: 2019-03-29 10:11:14

 * @LastEditTime: 2019-04-09 23:32:43

 */

var utils = require('./utils')

var webpack = require('webpack')

var config = require('../config')

var merge = require('webpack-merge')

var baseWebpackConfig = require('./webpack.base.conf')

// var HtmlWebpackPlugin = require('html-webpack-plugin')

var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')

var MpvueVendorPlugin = require('webpack-mpvue-vendor-plugin')

// copy from ./webpack.prod.conf.js

var path = require('path')

var UglifyJsPlugin = require('uglifyjs-webpack-plugin')

var ExtractTextPlugin = require('extract-text-webpack-plugin')

var CopyWebpackPlugin = require('copy-webpack-plugin')

var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')

// add hot-reload related code to entry chunks

// Object.keys(baseWebpackConfig.entry).forEach(function (name) {

//   baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])

// })

module.exports = merge(baseWebpackConfig, {

  module: {

    rules: utils.styleLoaders({

      sourceMap: config.dev.cssSourceMap,

      extract: true

    })

  },

  // cheap-module-eval-source-map is faster for development

  // devtool: '#cheap-module-eval-source-map',

  // devtool: '#source-map',

  output: {

    path: config.build.assetsRoot,

    // filename: utils.assetsPath('[name].[chunkhash].js'),

    // chunkFilename: utils.assetsPath('[id].[chunkhash].js')

    filename: utils.assetsPath('[name].js'),

    chunkFilename: utils.assetsPath('[id].js')

  },

  plugins: [

    new webpack.DefinePlugin({

      'process.env': config.dev.env

    }),

    // copy from ./webpack.prod.conf.js

    // extract css into its own file

    new ExtractTextPlugin({

      // filename: utils.assetsPath('[name].[contenthash].css')

      filename: utils.assetsPath(`[name].${config.dev.fileExt.style}`)

    }),

    // Compress extracted CSS. We are using this plugin so that possible

    // duplicated CSS from different components can be deduped.

    new OptimizeCSSPlugin({

      cssProcessorOptions: {

        safe: true

      }

    }),

    new webpack.optimize.CommonsChunkPlugin({

      name: 'common/vendor',

      minChunks: function (module, count) {

        // any required modules inside node_modules are extracted to vendor

        return (

          module.resource &&

          /\.js$/.test(module.resource) &&

          module.resource.indexOf('node_modules') >= 0

        ) || count > 1

      }

    }),

    new webpack.optimize.CommonsChunkPlugin({

      name: 'common/manifest',

      chunks: ['common/vendor']

    }),

    new MpvueVendorPlugin({

      platform: process.env.PLATFORM

    }),

    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage

    // new webpack.HotModuleReplacementPlugin(),

    new webpack.NoEmitOnErrorsPlugin(),

    // https://github.com/ampedandwired/html-webpack-plugin

    // new HtmlWebpackPlugin({

    //   filename: 'index.html',

    //   template: 'index.html',

    //   inject: true

    // }),

    new FriendlyErrorsPlugin(),

    new UglifyJsPlugin({

      sourceMap: true

    })

  ]

})