zoukankan      html  css  js  c++  java
  • vue项目优化

    1.v-if  v-show

    2.在页面destroy或beforeRouterLeave时清除定时器跟事件的监听

    3.图标采用雪碧图

    4.路由采用懒加载

    5.组件采用按需加载

    6.v-for遍历时一定为item添加key值

    7.打包的vendor.js过大,采用cdn加载不打包进入vendor.js,步骤:1.在index界面引入cdn。2.在webpack.config.base.js文件中添加externals2.在main.js文件删除对应的引用,use采用在externals中的变量。

    8.可以采用Gzip进行文件压缩。步骤:1.npm install --save-dev compression-webpack-plugin@1.1.11;2.在config中的index.js修改productionGzip属性为true。

    9.happypack 

    npm install happypack -D
    
    webpack.base.config.js
    
    rules中添加对应的打包规则
    
    
     {
            test: /.vue$/,
            // loader: 'vue-loader',
            use: ['happypack/loader?id=vue'],
            // options: vueLoaderConfig
          },
          {
            test: /.js$/,
            // loader: 'babel-loader?cacheDirectory',
            use:['happypack/loader?id=babel'],
            exclude: /node_modules/,
            include: resolve('src')
          },
    
    
    然后 在plugin添加对应的配置
    plugins: [
        new HappyPack({
          // 用唯一的标识符id,来代表当前的HappyPack是用来处理一类特定的文件
          id:'vue',
          loaders:[
            {
              loader:'vue-loader',
              options: vueLoaderConfig
            }
          ],
          threadPool: HappyPackThreadPool,
        }),
        
        new HappyPack({
          // 用唯一的标识符id,来代表当前的HappyPack是用来处理一类特定的文件
          id:'babel',
          // 如何处理.js文件,用法和Loader配置中一样
          loaders:['babel-loader?cacheDirectory'],
          threadPool: HappyPackThreadPool,
        }),
        
      ],

    rule中的id 与plugin 中的id需要一致
     
  • 相关阅读:
    [软件逆向]实战Mac系统下的软件分析+Mac QQ和微信的防撤回
    测试Storm的多源头锚定
    理解Storm可靠性消息
    Storm处理流程, 基本参数配置
    解决Storm 和yarn 8080 端口冲突
    TridentState分析
    Trident中 FixedBatchSpout分析
    Java序列简单使用
    JVM 监控以及内存分析
    Zookeeper入门开发demo
  • 原文地址:https://www.cnblogs.com/tutao1995/p/11847022.html
Copyright © 2011-2022 走看看