CODE大全
版权声明:本文为博主原创文章,未经博主允许不得转载。

vue 配合 webpack 打包优化

发布时间:『 2016-12-16 14:13』  博客类别:WEB前端  阅读(355) 评论(0)

前面写过很多篇 webpack 相关的教程。具体可以查看《webpack 教程》。在实践中,我们发现 webpack 的打包有很多可以优化的地方,关于性能方面我做了一个总结,希望可以帮助到大家!

webpack 的优缺点

优点:把依赖库提前打包出来并保留引用,打包功能模块时不再打包依赖库,只引用依赖,从而减少打包时间。思想来源:知乎专栏-彻底解决Webpack打包性能问题
缺点:本方式产生了依赖包的js,要在html之初引入,和懒加载的观念有所冲突。懒加载是在需要的时候才请求资源,而本方式提前把某些可能不需要的资源加载了进来。

优化目标

是为了减少发布到用于测试的“伪生产环境”时打包业务模块过程中npm run testbuild的时间【频繁执行】
并不是减少本地开发环境npm run dev的时间
也不是减少发布到“生产环境”时打包业务模块过程中npm run build的时间【不频繁,上线才执行】

关于npm run testbuild

由于我们开发的项目在在微信浏览器内打开,并且使用了微信的jssdk,所以需要发布到真实的微信环境进行测试(这个动作我们要经常进行)。但是这只是我们开发人员才知晓的微信公众号(和我们项目对外服务的公众号是等价的,只不过用于真正发布前测试)
所以对于有些朋友,不频繁执行打包操作的话,可能并不需要进行本优化,为了懒加载,甚至不应该进行本优化。

另容易误解的地方

本地开发目前不需要优化,所以本优化和webpack.config.js无关
生产环境需要懒加载,我们不希望该环境一开始就加载所有的依赖包,所以本次优化和npm run build使用的webpack.production.js无关
和需要经常执行的打包发布到测试生产环境的操作npm run testbuild有关,所以我们新建了webpack.dll.config.js和webpack.dll.production.js。所做的优化基本围绕这两个文件进行。

涉及的文件

新建webpack.dll.config.js:这是打包依赖包的配置文件
新建webpack.dll.production.js:这是npm run testbuild时执行的配置文件,使用webpack.DllReferencePlugin引用了提前打包好的依赖包
修改package.json:新增dllconfig命令、testbuild命令
修改~pathto/index.html:通过script标签引入打包好的依赖包文件。生产环境不使用本优化,不引入依赖包的js,测试生产环境使用的本优化,引入依赖包的js。
修改.gitignore:忽略webpack.dll.config.js打包依赖包过程中产生的manifest.json文件

优化结果

优化效果:npm run build的时间为110秒左右,npm run testbuild的为50秒左右。
副作用:需要在测试生产环境的套模板页面另引入一个多余的js:即之前打包的依赖包。
注意:可以考虑把依赖包放在静态资源服务器上,每回修改webpack.dll.config.js时才执行一次npm run dllconfig并上传。

创建依赖包的webpack配置文件 webpack.dll.config.js(名字可以改)

/**
 * @file 使用DllPlugin把常用依赖单独打包,提高webpack打包效率
 * @author Liu Junyang
 * 在应用到这些依赖包的后端套模板的html需要使用script标签引用output的filename的js文件
 */
var path = require('path')
const webpack = require('webpack');

const vendors = [
    'vue',
    'vue-router',
    'vue-resource',
    'vue-touch',
    'mint-ui',
    'swiper_3.4.0_hack',
    'hack_swiper'
];

module.exports = {
    output: {
        path: 'static',
        filename: '[name].js',
        library: '[name]',
    },
    entry: {
        "vendors": vendors,
    },
    plugins: [
        new webpack.DllPlugin({
            path: 'manifest.json',
            name: '[name]',
            context: __dirname,
        }),
    ],
    resolve: {
        alias: {
            'vue': path.resolve(__dirname, './node_modules/vue/dist/vue.min.js'),
            'style': path.resolve(__dirname, './src/style'),
            'module': path.resolve(__dirname, './src/module'),
            'libs': path.resolve(__dirname, './src/libs'),
            'layout': path.resolve(__dirname, './src/layout'),
            'images': path.resolve(__dirname, './src/images'),
            'pages': path.resolve(__dirname, './src/pages')
        },
        fallback: path.resolve(__dirname, './src/util')
    },
};


命令行执行webpack --config webpack.dll.config.js打包依赖包

在业务打包的webpack配置文件中通过DllReferencePlugin在打包的时候引用依赖包

plugins: [        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            output: {
                comments: false  // remove all comments
            },
            compress: {
                warnings: false,
                drop_debugger: true,
                drop_console: true
            }
        }),
        new webpack.ProvidePlugin({
            $: 'zepto/dist/zepto.min.js',
            jQuery: 'zepto/dist/zepto.min.js'
        }),
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./manifest.json'),
        })
    ]

在html文件中通过script标签引入依赖包

{% if STATIC_JS_DEBUG %}    <script src="/static/vue/vendors.js"></script>{% endif %}

关于package.json中的命令

{
    "scripts": {
        "dev": "webpack-dev-server --inline --hot --quiet --display-error-details",
        "dllconfig": "rm -rf static/* && webpack --config webpack.dll.config.js",
        "testbuild": "npm run dllconfig && webpack --progress --hide-modules --config webpack.dll.production.js",
        "build": "rm -rf static/* && webpack --progress --hide-modules --config webpack.production.js",
        "ontestline": "npm run testbuild && npm run html && ./bin/online",
        "online": "npm run build && npm run html && ./bin/online"
  }}
——— 全文完 ———
如有版权问题,请联系532009913@qq.com。
关键字:   webpack     打包     性能优化     前端     vue  
评论信息
暂无评论
发表评论
验证码: 
Powered by CODE大全 | 鄂ICP备14009759号-2 | 网站留言 Copyright © 2014-2016 CODE大全 版权所有