vue应用性能优化分离css 第三方包压缩代码按需加载

本文链接：https://blog.csdn.net/D_claus/article/details/84064909

1. 服务端渲染

问题:1.单页面应用不利于SEO,因为所有HTML文档都是由js动态生成的。2.首次加载速度过慢。

2. 分离css

    1. 安装插件
    npm install extract-text-webpack-plugin@1.0.1 --save-dev

    2. 修改css-loader配置
    loader: ExtractTextPlugin.extract("style-loader", "css-loader")

    3. plugin配置中使用插件
    new ExtractTextPlugin('app.css'),

3. 分离第三方包

    1. 引入webpack
    var webpack = require('webpack');

    2. 修改入口文件
    entry: {
            app: path.resolve(__dirname, 'src/main.js'),
            // 需要分离的第三方包名写在数组中
            vendors: ['vue', 'vue-resource', 'vue-router', 'vuex', 'mint-ui', 'moment', 'vue-preview']
    },

    3. plugin中配置插件
    // 分离第三方包插件
    new webpack.optimize.CommonsChunkPlugin({
            name: 'vendors',
            filename: 'vendors.js'
    })

4. 代码压缩

    1. html代码压缩
    new htmlwp({
            title: '首页',  //生成的页面标题<head><title>首页</title></head>
            filename: 'index.html', //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
            template: 'template.html', //根据index1.html这个模板来生成(这个文件请程序员自己生成)
            // 代码压缩
            minify: {
                    // 删除注释
                    removeComments: true,
                    // 删除空格
                    collapseWhitespace: true,
                    // 删除空格缩进
                    removeAttributeQuotes: true
            }
    }),

    // 2. js代码压缩混淆插件
    new webpack.optimize.UglifyJsPlugin({
            beautify: false,
            mangle: {
                    screw_ie8: true,
                    keep_fnames: true
            },
            compress: {
                    warnings: false,
                    screw_ie8: true
            },
            comments: false
    }),
    // 3. 删除警告
    new webpack.DefinePlugin({
    'process.env': {
            // 注意字符串被引号引起来
            NODE_ENV: '"production"'
    }
    })

5. 按需加载

5.1

{
  path: '/index',
  name: 'Index',
  component: resolve => require(['@/components/index'],resolve)
}

5.2（当前方法测试没有完成，按照官网上要求babel要安装包：npm install --save-dev @babel/plugin-syntax-dynamic-import，个人测试报错,bable-score不匹配，安装@bable/score也无用，查看@babel/plugin-syntax-dynamic-import版本信息，最低为7.0.0，可能需要安装安装其他es6编译包）

// 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。

const About = () => import('@/components/about') */
// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。 把组件按组分块

const About = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/about')

{
  path: '/about',
  component: About
}

5.3

{
  path: '/home',
  name: 'home',
  component: r => require.ensure([], () => r(require('@/components/home')), 'demo')
}