webpack優(yōu)化方法，vendor達(dá)到3M......

項(xiàng)目中使用了iview 和 element UI ,并且集成了JQuery！導(dǎo)致現(xiàn)在打包出來的JS 文件非常大

同時(shí)發(fā)現(xiàn)有很多被重復(fù)打包的JS文件，下面是webpack.prod.conf.js內(nèi)的配置

/`
var path = require('path')
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 ExtractTextPlugin = require('extract-text-webpack-plugin')
var env = config.build.env

var webpackConfig = merge(baseWebpackConfig, {
module: {

rules: utils.styleLoaders({
  sourceMap: config.build.productionSourceMap,
  extract: false
})

},
devtool: config.build.productionSourceMap ? '#source-map' : false,
output: {

path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')

},
plugins: [

// http://vuejs.github.io/vue-loader/en/workflow/production.html
// new webpack.DefinePlugin({
//   'process.env': env
// }),
new webpack.DefinePlugin({
  'process.env': {
      NODE_ENV: '"production"'
  }
}),
new webpack.optimize.UglifyJsPlugin({
  comments: false,        //去掉注釋
  compress: {
    warnings: false        //忽略警告,要不然會(huì)有一大堆的黃色字體出現(xiàn)……
  },
  sourceMap: true
}),
// extract css into its own file
new ExtractTextPlugin({
  filename: utils.assetsPath('css/[name].[contenthash].css')
}),
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
  filename: config.build.index,
  template: 'index.html',
  inject: true,
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
    // more options:
    // https://github.com/kangax/html-minifier#options-quick-reference
  },
  // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  chunksSortMode: 'dependency'
}),
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
  name: '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(
        path.join(__dirname, '../node_modules')
      ) === 0
    )
  }
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
  name: 'manifest',
  chunks: ['vendor']
})

]
})

if (config.build.productionGzip) {
var CompressionWebpackPlugin = require('compression-webpack-plugin')

webpackConfig.plugins.push(

new CompressionWebpackPlugin({
  asset: '[path].gz[query]',
  algorithm: 'gzip',
  test: new RegExp(
    '\\.(' +
    config.build.productionGzipExtensions.join('|') +
    ')$'
  ),
  threshold: 10240,
  minRatio: 0.8
})

)
}

if (config.build.bundleAnalyzerReport) {
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

module.exports = webpackConfig

`/

以下是webpack.base.conf.js的配置文件

/`
/*
1.配置webpack編譯入口
2.配置webpack輸出路徑和命名規(guī)則
3.配置模塊resolve規(guī)則
4.配置不同類型模塊的處理規(guī)則
*/

var path = require('path')
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')

// 獲取絕對(duì)路徑
function resolve (dir) {
return path.join(__dirname, '..', dir)
}

module.exports = {

// webpack入口文件

entry: {

app: ['babel-polyfill','./src/main.js']

},
// webpack輸出路徑和命名規(guī)則
externals: {
'AMap': 'AMap'

},

output: {

// webpack輸出的目標(biāo)文件夾路徑（例如：/dist）
path: config.build.assetsRoot,
// webpack輸出bundle文件命名格式
filename: '[name].js',
// webpack編譯輸出的發(fā)布路徑（例如'//cdn.xxx.com/app/'）
publicPath: process.env.NODE_ENV === 'production'
  ? config.build.assetsPublicPath
  : config.dev.assetsPublicPath

},
devtool: '#cheap-module-eval-source-map',
// 模塊resolve的規(guī)則
resolve: {

extensions: ['.js', '.vue', '.json'],
modules: [
  resolve('src'),
  resolve('node_modules')
],
// 別名，方便引用模塊，例如有了別名之后，
// import Vue from 'vue/dist/vue.common.js'可以寫成 import Vue from 'vue'
alias: {
  'vue$': 'vue/dist/vue.common.js',
  'src': resolve('src'),
  'assets': resolve('src/assets'),
  'components': resolve('src/components'),
  'jquery': 'jquery'  //webpack使用jquery，當(dāng)前是使用npm安裝的jquery,可以直接導(dǎo)入
}

},
// 不同類型模塊的處理規(guī)則
module: {

rules: [
  {// 對(duì)所有.vue文件使用vue-loader進(jìn)行編譯
    test: /\.vue$/,
    loader: 'vue-loader'
  },
  {// 對(duì)src和test文件夾下的.js文件使用babel-loader將es6+的代碼轉(zhuǎn)成es5
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test')]
  },
  {// 對(duì)圖片資源文件使用url-loader
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    query: {
      // 小于10K的圖片轉(zhuǎn)成base64編碼的dataURL字符串寫到代碼中
      limit: 10000,
      // 其他的圖片轉(zhuǎn)移到靜態(tài)資源文件夾
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
  },
  {// 對(duì)字體資源文件使用url-loader
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    query: {
      // 小于10K的資源轉(zhuǎn)成base64編碼的dataURL字符串寫到代碼中
      limit: 10000,
      // 其他的資源轉(zhuǎn)移到靜態(tài)資源文件夾
      name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
  }
]

},
plugins: [

/*
在webpack.prod.conf.js文件中有配置提取公共的模塊
// 提取公共模塊 
new webpack.optimize.CommonsChunkPlugin({
  name: 'vendors', // 公共模塊的名稱
  chunks: chunks,  // chunks是需要提取的模塊
  minChunks: 4 || chunks.length //公共模塊被使用的最小次數(shù)。比如配置為3，也就是同一個(gè)模塊只有被3個(gè)以外的頁面同時(shí)引用時(shí)才會(huì)被提取出來作為common chunks。

}),*/

//導(dǎo)入jquery,為了避免沖突多暴露了幾個(gè)關(guān)鍵字  用法：直接使用即可，jquery是全局的了
new webpack.ProvidePlugin({
  jQuery: "jquery",
  $: "jquery",
})

]

// plugins: [
//     new webpack.DllReferencePlugin({
//       context: path.resolve(__dirname, '..'),
//       manifest: require('./vendor-manifest.json')
//     })
// ]

}

`/

煩請大牛指點(diǎn)，不勝感激