前端性能优化（分包打包）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
// 需要chunks的包列表，支持正则
let chunksPackage = {
	'jquery':/jquery/,
	'element': /element-ui/,
	'vue':/vue/
}
function getModuleName(module) {
	var sign = 'node_modules';
	var signIndex = module.resource.indexOf(sign);
	var pathSeparator = module.resource.slice(signIndex - 1, signIndex);
	var modulePath = module.resource.substring(signIndex + sign.length + 1);
	var moduleName = modulePath.substring(0, modulePath.indexOf(pathSeparator) );
	moduleName = moduleName.toLowerCase();
	return moduleName
}

 plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: function(module, count) {
                return (
                    module.resource &&
                    /.js$/.test(module.resource) &&
                    module.resource.indexOf(
                        path.join(__dirname, '../node_modules')
                    ) === 0
                )
            }
        }),
	    ...Object.keys(chunksPackage).map(packageName => {
		    return new webpack.optimize.CommonsChunkPlugin({
			    name: packageName,
			    chunks: ['vendor'],
			    minChunks: function(module, count) {
				    return module.resource && 
                    chunksPackage[packageName].test(module.resource)
			    }
		    })
	    }),
	    new webpack.optimize.CommonsChunkPlugin({
		    name: '_common',
		    chunks: ['index','_router']//index.js和_router.js中抽取_common
	    }),
	    new webpack.optimize.CommonsChunkPlugin({
		    name: 'common_',
		    chunks: ['index','router_']//index.js和router_.js中抽取common_
	    }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'manifest',
	        filename: 'manifest.js'
        }),
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
// 多入口配置
// 通过glob模块读取pages文件夹下的所有对应文件夹下的js后缀文件，如果该文件存在
// 那么就作为入口处理
exports.entries = function() {
    var entryFiles = glob.sync(PAGE_PATH + '/*/*.js');
    var map = {};
    entryFiles.forEach((filePath) => {
        var filename = filePath.substring(filePath.lastIndexOf('/') + 1, 
                       filePath.lastIndexOf('.'));
        var jsarr = (filename=='_router'||filename=='router_')?[]
                    :['babel-polyfill'];
	    jsarr.push(filePath);
        map[filename] = jsarr;
    });
    return map
}
// 多页面输出配置
// 读取pages文件夹下的对应的html后缀文件，然后放入数组中
exports.htmlPlugin = function() {
    let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
    let arr = []
    entryHtml.forEach((filePath) => {
        let filename = filePath.substring(filePath.lastIndexOf('/') + 1, 
                       filePath.lastIndexOf('.'));
        let tempChunks = ['manifest','vue','jquery', 'element', 
                          'vendor','_common','common_','_router',
                          'router_',filename];
        let conf = {
            template: filePath,
            filename: filename + '.html',
            chunks: tempChunks,
            inject: true,
	        chunksSortMode: function (chunk1, chunk2) {
		        let order1 = tempChunks.indexOf(chunk1.names[0]);
		        let order2 = tempChunks.indexOf(chunk2.names[0]);
		        return order1 - order2;
	        }
        }
        if (process.env.NODE_ENV === 'production') {
            conf = merge(conf, {
                minify: {
                    removeComments: true,
                    collapseWhitespace: true,
                    removeAttributeQuotes: true
                },
                chunksSortMode: 'dependency'
            })
        }
      arr.push(new HtmlWebpackPlugin(conf))
    })
    return arr
}

1
2
3
4
5
6
7
plugins: [
   new webpack.ProvidePlugin({
      $:"jquery",
      jQuery:"jquery",
      "windows.jQuery":"jquery"
   })
]